目录

前端-CORS-跨域问题解决

JAY.LIN 收录于编程报错 Vue Vue

2025-03-09 约 590 字预计阅读 2 分钟

https://bing.ee123.net/img/rand?artid=146134982

目录

前端 | CORS 跨域问题解决

问题： Access to fetch at ‘http://localhost:3000/save’ from origin ‘http://localhost:5174’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ’no-cors’ to fetch the resource with CORS disabled.。

分析： CORS (跨域请求) 被拦截 —— `http://localhost:5174` 请求 `http://localhost:3000` ，但 `Access-Control-Allow-Origin` 头部没有配置，导致请求被浏览器拦截。

解决：前端可以尝试进行跨域请求。

①修改后端

（假设是 Express）：在 `server.js` （或 `index.js` ）中添加：

// 记得ctrl+shift+y打开终端，在里头运行 npm install cors
const cors = require("cors"); 
app.use(cors());

（假设包管理中的 “type”: “module” ）

// 记得ctrl+shift+y打开终端，在里头运行 npm install cors
import cors from 'cors';
app.use(cors());

根据情况，是
express服务器 还是 “type”: “module” ，判断是用require还是import

②手动设置响应头：

app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'http://localhost:5174');
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    if (req.method === 'OPTIONS') {
      return res.status(200).end();
    }
    next();
  });

或者

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");  // 或指定特定前端地址
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization");
  next();
});

③如果后端无法修改，可以在 `fetch` 请求中加入 `mode: "cors"` ：

const response = await fetch("http://localhost:3000/save", {
  method: "POST",
  mode: "cors",  // 添加 CORS 模式
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({ content: text })
});

完整代码：

import cors from 'cors';
import express from 'express';

const app = express();
const PORT = 3000;  // 后端服务器端口

// 允许跨域请求
app.use(cors({
    origin: 'http://localhost:5174', // 允许的前端域名
    methods: ['GET', 'POST'],    // 允许的请求方法
    allowedHeaders: ['Content-Type', 'Authorization'],  // 允许的请求头
})); 

// 额外的跨域处理
app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', 'http://localhost:5174');
    res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    if (req.method === 'OPTIONS') {
      return res.status(200).end();
    }
    next();
  });

app.use(express.json());    // 解析JSON请求体

// 添加 get请求，检查后端是否正常运行
app.get('/',  (req, res) => {
  res.send('√后端运行正常！');
});

注：注意顺序，press和cors的顺序