React调用Express后端接口报CORS跨域策略错误该如何解决？

问题根源 #

你当前遇到的CORS报错核心原因是Express中间件加载顺序错误，同时接口逻辑存在缺失：

• Express的中间件按注册顺序依次执行，你先注册了路由规则，请求匹配到路由后直接进入业务逻辑，不会再执行后续的cors中间件，导致响应头没有跨域相关的标识字段
• 你的createPost接口没有给前端返回任何响应，会额外导致前端请求超时挂起

修复步骤 #

1. 调整后端index.js的中间件顺序 #

修改index.js代码如下，把跨域、请求解析类中间件放到路由注册之前：

import express from "express";
import { APP_PORT } from "./config";
import db from "./database";
import cors from "cors";
import bodyParser from "body-parser";
import Routes from "./routes";
const app = express();

// 先注册cors中间件
app.use(cors({
  // 可指定允许的前端地址，生产环境避免全放开更安全
  origin: "http://localhost:6464",
  methods: ["GET", "POST", "PUT", "DELETE", "OPTIONS"],
  allowedHeaders: ["Content-Type"]
}));
// 再注册请求参数解析中间件
app.use(bodyParser.json({ extended: true }));
app.use(bodyParser.urlencoded({ extended: true }));
// 路由注册放在所有中间件最后
app.use("/", Routes);

app.listen(APP_PORT, () => {
  console.log("app connected successfully");
});

2. 补全createPost接口的返回逻辑 #

修改POSTCONTROLLER.JS中的createPost方法，给前端返回明确响应：

createPost(req, res) {
  console.log(req.body);
  // 给前端返回响应结果
  res.status(200).json({
    code: 200,
    msg: "发布成功",
    data: req.body
  })
}

3. 验证效果 #

修改完成后重启后端服务，再触发前端的发布请求即可解决跨域问题。

内容的提问来源于stack exchange，提问作者Dushyant Khoda