关于Access-Control-Allow-Origin的跨域问题

Question

前后端分离开发遇到跨域问题

后端要进行session验证，
前端用

xhrFields : {
  withCredentials: true
},
crossDomain : true,

后端配置

将后端放进cookie的session传过去。

现在尝试了两种办法都没有解决：
一.
后端将 Access-Control-Allow-Origin 设为*，同时也把Access-Control-Allow-Credentials设为true了，但是由于前端设置了 withCredentials: true 的原因，chrome和火狐都报错了。

二.
后端将 Access-Control-Allow-Origin 设为前端的具体IP地址和端口号，火狐浏览器正常访问，后端也能正常拿到session，但是chrome浏览器给拦截了，requestHeader没有显示，同时后端也拿不到session。

现在前端是用修改chrome浏览器属性（--args --disable-web-security --user-data-dir）来进行调试的，产品上线之后会继续出现这种跨域问题么？如果和测试一样也不能让用户改配置哇，请问各位大佬有没有办法解决，谢谢大家了。

Answer 1

设置这个试试：

Access-Control-Allow-Credentials: true

参考文档：
https://developer.mozilla.org...
https://developer.mozilla.org...

Answer 2

1.请求必须有字段Access-Control-Request-Method
2.如果请求有Access-Control-Request-Headers字段，后端也必须有
3.前端withCredentials和后端Access-Control-Allow-Credentials也是必须设为true的

Answer 3

我是debug发现跨域问题是post数据的格式问题导致的
为什么会有这问题? 因为允许跨域的设置下, 只允许客户端发起简单请求, 不支持复杂请求
而我的post数据是js对象格式, 也就是json格式, 允许跨域的设置下, 不支持复杂请求即json格式的数据请求
可以看下这个文章: https://www.jianshu.com/p/ebd...

如何解决?
修改数据格式, 改成这样:

import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

文档: https://github.com/axios/axios

此时请求变成简单请求, 符合允许跨域请求的设置, 解决

Answer 4

想问一下楼主最后这个问题解决了吗？

Answer 5

你说的这些方式遇到ie内核浏览器问题会更多，好像你前后端都有权限更改，跨域可以试试用jsonp的方式解决呢。