CORS issue with React.js + Node.js(express)

Question

我现在正在将我的react应用程序与mysql连接。

我尝试了proxy(在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

我在包.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"),
};

Answer 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);

Answer 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();
});

使用(cors(((；