前端 | 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('√后端运行正常！');
});