React.js + Node.js(express) 的 CORS 问题答案

【问题标题】：CORS issue with React.js + Node.js(express)React.js + Node.js(express) 的 CORS 问题
【发布时间】：2021-09-04 10:57:33
【问题描述】：

我现在正在将我的 react-app 与 mysql 连接。

我尝试了代理（在 package.json 中）、app.use(cors()) 以及 Google chrome Cors Extension 来捕捉这个 cors 问题，但我做不到。我需要你的帮助。

错误信息

Access to XMLHttpRequest at 'localhost:4000/api/test' 
from origin 'http://localhost:3000' has been blocked 
by CORS policy: Cross origin requests are only supported
for protocol schemes: http, data, chrome, chrome-extension, 
chrome-untrusted, https.
xhr.js:177 GET localhost:4000/api/test net::ERR_FAILED

我在 package.json 中添加了这一行 "proxy": "http://localhost:4000/",

server.js

const express = require("express");
const cors = require("cors");
const app = express();
const PORT = process.env.PORT || 4000;
const db = require("./config/db");

app.use(cors());

app.get("/", cors(), (req, res) => {
  res.send("hello route / ");
});

app.get("/api/test", cors(), (req, res) => {
  res.header("Access-Control-Allow-Origin", "*");
  db.query("SELECT * FROM travel_test", (err, data) => {
    if (!err) res.send({ data });
    else res.send(err);
  });
});

app.listen(PORT, () => {
  console.log(`Server On : http://localhost:${PORT}/`);
});

api.js

import axios from "axios";

const api = axios.create({
  baseURL: "localhost:4000/api/",
});

export const cityApi = {
  test: () => api.get("test"),
};

【问题讨论】：

尝试将`baseURL:"localhost:4000/api/",`改为baseURL: "http://localhost:4000/api/",
@ĐăngKhoaĐinh 谢谢老兄 :) 它有效！

标签： node.js reactjs express cors

【解决方案1】：

试试这个

app.all('*', function(req, res, next) {
   res.header("Access-Control-Allow-Origin", "*");
   res.header("Access-Control-Allow-Headers", "X-Requested-With");
   next();
});

或

app.use(express.methodOverride());

// ## CORS middleware
// 
var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
      
    // intercept OPTIONS method
    if ('OPTIONS' == req.method) {
      res.send(200);
    }
    else {
      next();
    }
};
app.use(allowCrossDomain);

【讨论】：

【解决方案2】：

将此代码添加到您的 server.js 文件中：

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header(
    "Access-Control-Allow-Headers",
    "Origin, X-Requested-With, Content-Type, Accept, Authorization, 'Content-Type' : 'multipart/form-data' ,* "
  );
  res.header(
    "Access-Control-Allow-Methods",
    "GET, POST, PATCH, PUT, DELETE, OPTIONS"
  );
  next();
});

在 app.use(cors());

之前

【讨论】：