AJAX跨域POST发送json时,会先发送一个OPTIONS预请求

<a href="http://blog.163.com/sdhhqb@126/blog/static/637055372016112591913960/">原文链接</a>

前端开发中,有时在开发环境中需要调用后台的接口时,由于一些原因接口不支持跨域。这种情况我们一般可以通过用express建一个简单的代理服务器,这个服务器接收所有的接口,并且允许跨域,比如本地页面通过localhost:8081访问,express服务器通过localhost:8082访问。
最近一个项目中,请求接口时要求参数以json字符串方式post给服务器,结果以前没问题的跨域代理不行了。检查发现每次请求接口都会有两个请求,先发送一个OPTIONS请求,网上查了一下,这是跨域非简单请求时浏览器先会请求服务器验证一下,这个请求成功返回浏览器才会允许跨域。以前的express代理,对所有的请求都会去请求接口服务器,OPTIONS请求到接口服务器没有成功返回,所以跨域失败了。修改一下express代理的代码,设置对OPTIONS请求直接返回成功,就可以跨域代理了。
 
参考链接:
 
参考代码:

var express = require('express');
var request = require('request');
var bodyParser = require('body-parser');

var app = express();
app.use(bodyParser.json()); // for parsing application/json
app.use(bodyParser.urlencoded({ extended: false })); // for parsing application/x-www-form-urlencoded

app.all('*', function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
res.header("Content-Type", "application/json;charset=utf-8");

var originalUrl = req.originalUrl;
option = {
url: 'http://algo.chiq-cloud.com/chiqalgo'+originalUrl,
method: "POST",
json: true,
body: req.body,
headers: {
"content-type":"application/json"
}
};

var method = req.method;
// OPTIONS请求直接返回成功
if (method == 'OPTIONS') {
res.status(200).send('{"test": "options ok"}');
return;
}
if (method == 'POST') {
option.method= "POST";
}
console.log(req.ip + ' ' + method + ' ' + originalUrl + ' ' + new Date().toLocaleString());

request(option, function (error, response, body) {
if (!error && response.statusCode == 200) {
res.send(body);
} else {
if (error) {
res.status(500).send(error);
} else {
res.status(500).send('remote error, status: ' + response.statusCode);
}
}
});
});

app.listen(8081);
console.log('Listening on port 8081...');

posted @ 2017-09-06 11:24  lyls  阅读(2213)  评论(0编辑  收藏  举报