前端 | 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());

②手动设置响应头：

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的顺序