Express服务器和Axios CORS Preflight响应不成功 [英] Express server and Axios CORS Preflight response is not successful
问题描述
我使用react.js(在端口3000上运行)执行以下操作
I have the following get action using react.js ( running on port 3000)
var config = {
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
// 'Accept': 'application/json',
// 'Content-Type': 'application/json',
}
};
axios.get(api_url + '/schools/countries/' + country, config)
.catch(err => {
alert('There was an error trying to fetch', country)
})
.then(response => {
.....
}
我正在使用代理将其发送到运行在端口3001上的快递服务器。快递服务器中的App.js文件如下:
And I'm using a proxy to send that to an express server running on port 3001. The App.js file in the express server is the following:
var express = require('express');
var app = express();
var cors = require('cors')
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');
// uncomment after placing your favicon in /public
//app.use(favicon(path.join(__dirname, 'public', 'favicon.ico')));
//app.use(logger('dev'));
// app.use(function(req, res, next) {
// res.header("Access-Control-Allow-Origin", "*");
// res.header("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
// res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
// next();
// });
app.all('*', function(req, res, next) {
res.header('Access-Control-Allow-Origin', 'URLs to trust of allow');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
if ('OPTIONS' == req.method) {
res.sendStatus(200);
} else {
next();
}
});
//app.use(cors())
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
extended: false
}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', index);
app.use('/users', users);
app.use('/schools', schools);
console.log("IN APP.JS");
// catch 404 and forward to error handler
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
// error handler
app.use(function(err, req, res, next) {
// set locals, only providing error in development
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
由于某种原因,我收到以下错误:
And for some reason I get the following errors:
[错误]无法加载资源:飞行前响应不成功(MR,第0行)
[Error] Failed to load resource: Preflight response is not successful (MR, line 0)
[错误] XMLHttpRequest无法加载 http:// localhost:3000 / schools / countries / MR 。飞行前响应不成功
[Error] XMLHttpRequest cannot load http://localhost:3000/schools/countries/MR. Preflight response is not successful
在React端(前端),我有package.json文件:
In the react side (front-end) I have this is the package.json file:
"proxy": "http://localhost:3001",
我尝试在App.js文件中使用不同的标头,并且尝试使用cors库进行此工作等。如何解决此错误?
I've tried using different headers in the App.js file and I have tried using the cors library to make this work etc. How can I fix this error ?
谢谢!
推荐答案
我找到了解决方案。问题1.我确实必须从前端删除标头。第二个也是最重要的一点是,当您使用代理进行axios调用时,您不应这样做:
I found the solution. The problem what 1. I did have to remove the headers from the front end. The second and probably most important thing is that when you're making a axios call using a proxy You should do not this:
var api_url = http:localhost
axios.get(api_url +'/ schools / countries /'+国家)
您应该这样做
axios.get('/schools/countries/' + country)
没有本地主机部分。
这篇关于Express服务器和Axios CORS Preflight响应不成功的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!