javascript - 使用Vue的axios vue-resource跨域不成功 但原生xhr就可以

刚好也遇到了类似的问题，已解决，试着解答下你的问题。

首先，axios发送请求时的数据默认是JSON格式的。这是导致用axiosPOST跨域出错的主要原因。

根据CORS的标准，当浏览器发送跨域请求时，如果请求不是GET或者特定POST（Content-Type只能是application/x-www-form-urlencoded,multipart/form-data或text/plain的一种）时，强烈要求浏览器必须先以OPTIONS请求方式发送一个预请求(preflightrequest)，从而获知服务器端对跨源请求所支持HTTP方法。

所以，使用axios直接发送POST的跨域请求，如果web后端对OPTIONS的响应有问题，就会报错。我没有Node环境，对Node也不了解，所以没法验证你的配置是否OK，但参考我Nginx上的配置，我感觉你在Allow-Headers里再加点内容可能会OK？

另外，至于为何XHR可以。我猜也是跟数据格式有关，XHR应该是form-urlencoded格式吧。因为你的截图看不到FormData，所以不好下结论。

最后，我用axios解决跨域的方案和你类似，不过是先把params转换为字符串格式了，见末尾的官方用x-www-form-urlencoded格式的说明

importqsfrom'qs';importaxiosfrom'axios';letreqUrl='http://xxx.com';letreqParams={name:'aaa'};axios.post(url,qs.stringify({params:reqParams})).then(response=>{console.log(response);})

##Wide-openCORSconfigfornginx#location/{if($request_method='OPTIONS'){add_header'Access-Control-Allow-Origin''*';add_header'Access-Control-Allow-Methods''GET,POST,OPTIONS';##Customheadersandheadersvariousbrowsers*should*beOKwithbutaren't#add_header'Access-Control-Allow-Headers''DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';##Tellclientthatthispre-flightinfoisvalidfor20days#add_header'Access-Control-Max-Age'1728000;add_header'Content-Type''text/plaincharset=UTF-8';add_header'Content-Length'0;return204;}if($request_method='POST'){add_header'Access-Control-Allow-Origin''*';add_header'Access-Control-Allow-Methods''GET,POST,OPTIONS';add_header'Access-Control-Allow-Headers''DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';}if($request_method='GET'){add_header'Access-Control-Allow-Origin''*';add_header'Access-Control-Allow-Methods''GET,POST,OPTIONS';add_header'Access-Control-Allow-Headers''DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';}}

官方用x-www-form-urlencoded格式的说明

CORS标准的说明

加了一个header，暂时解决了：

headers:{'Content-Type':'application/x-www-form-urlencoded'}

具体原因参考这个回答：
https://segmentfault.com/q/10...

我今天才折腾过这个实际上cors请求会发送两个第一个是options请求你看看能不能正确响应并且带有cors相关的首部