Cors错误严格起源时跨起源简单的nodeJS reactJS项目



我正试图将图像上传到Cloundinary,但出现了一个错误,状态代码500与cors有关,尽管我已将服务器设置为允许所有来源。

错误消息为:

POST http://localhost:5000/my-route-upload 500 (Internal Server Error)

这是我的POST功能:

const cloudinaryUpload = (fileToUpload) => {
return axios.post(API_URL + '/cloudinary-upload', fileToUpload)
.then(res => console.log(res))
.catch(err => {
console.log(err)
console.log("cannot post")
}); }

在服务器端,我在App.JS 中添加了以下块

const cors = require('cors'); 
var app = express();
app.use(cors({
origin: "*",
})
);

这些代码确实执行了,我试着将原点修改为特定的代码,比如http://127.0.0.1:3001(我的客户端端口是3000(。然后它出现了另一条错误消息

返回第一个错误,在选项卡"网络/标头:"中

Request URL: http://localhost:5000/cloudinary-upload
Request Method: POST
Status Code: 500 
Referrer Policy: strict-origin-when-cross-origin
Access-Control-Allow-Origin: *
Host: localhost:5000
Origin: http://127.0.0.1:3000

我不知道为什么它不起作用。我为客户端使用createreact应用程序,为服务器使用Express生成器

也许您应该将内容类型标头添加到Axios请求中。就像这样。

const res = await axios.post('url', data, {
headers: {
'content-type': 'application/json'
}
});

从客户端为服务器设置代理

代理可以是一个简单的您的package.json中的"proxy": "http://localhost:5000",其中所有未知请求都将代理到localhost:5000本质上,您需要将客户端的api调用为/my-route-upload,而不是http://localhost:5000/my-route-upload

但首选的方法是添加一个名为src/setupProxy.js的文件和$ npm install http-proxy-middleware --save将其添加到文件中


module.exports = function(app) {
app.use(
'/api',
createProxyMiddleware({
target: 'http://localhost:5000',
changeOrigin: true,
})
);
};```
Also look at enabling cors in express
https://enable-cors.org/server_expressjs.html
const cors = require('cors'); 
var app = express();
app.use(cors());

试试这个

此中间件有助于避免跨平台错误

app.use((req, res, next) => {
res.setHeader("Access-Control-Allow-Origin", "*");
res.setHeader(
"Access-Control-Allow-Methods",
"OPTIONS, GET, POST, PUT, PATCH, DELETE"
);
res.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
next();
});

在express应用程序中的所有路由之上的根文件上设置此头中间件,在AppJS 中用服务器cors块更新此代码块

最新更新