Express 服务器和 Axios CORS Preflight 响应不成功
Posted
技术标签:
【中文标题】Express 服务器和 Axios CORS Preflight 响应不成功【英文标题】:Express server and Axios CORS Preflight response is not successful 【发布时间】:2018-03-24 23:11:53 【问题描述】:我有以下使用 react.js 的 get 操作(在端口 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 文件如下:
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;
由于某种原因,我收到以下错误:
[错误] 加载资源失败:预检响应不成功(MR,第 0 行)
[错误] XMLHttpRequest 无法加载http://localhost:3000/schools/countries/MR。预检响应不成功
在反应端(前端)我有这个 package.json 文件:
"proxy": "http://localhost:3001",
我已经尝试在 App.js 文件中使用不同的标头,并且我已经尝试使用 cors 库来完成这项工作等。我该如何解决这个错误?
谢谢!
【问题讨论】:
从您的前端代码中删除headers: 'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
部分。这些标头是服务器要发送的 response 标头。将它们添加为请求标头的唯一效果是以您所看到的方式破坏事物。
当我这样做时,我得到这些错误:[错误] Origin 123.45.67.89:3000 is not allowed by Access-Control-Allow-Origin。 [错误] 加载资源失败:Access-Control-Allow-Origin 不允许 Origin 123.45.67.89:3000。 (MR,第 0 行)[错误] XMLHttpRequest 由于访问控制检查而无法加载localhost:3000/schools/countries/MR。
【参考方案1】:
我找到了解决方案。问题是什么 1. 我确实必须从前端删除标题。第二个可能也是最重要的事情是,当您使用代理进行 axios 调用时,您不应该这样做:
var api_url= "http:localhost"
axios.get(api_url + '/schools/countries/' + country)
你应该这样做:
axios.get('/schools/countries/' + country)
没有本地主机部分。
【讨论】:
以上是关于Express 服务器和 Axios CORS Preflight 响应不成功的主要内容,如果未能解决你的问题,请参考以下文章
与 react、express、axios、node 和 mysql 相关的 CORS 问题
CORS 和 s-s-r 以及 express、react 和 Axios
使用 express 和 axios 反应应用程序在呈现数据时出错
Express JS cors 中间件无法在浏览器上存储 cookie
将 Vue.js 用于客户端,将 Express 用于服务器端时出现“Access-Control-Allow-Origin”CORS 问题