Fork me on GitHub

聊聊跨域问题

什么是跨域

跨域,就是Web浏览器的同源政策的约束

在文章 《Web浏览器同源政策及其规避方法》 已经详细讲解

https://www.helingfeng.com/2018/04/02/Web%E6%B5%8F%E8%A7%88%E5%99%A8%E5%90%8C%E6%BA%90%E6%94%BF%E7%AD%96%E5%8F%8A%E5%85%B6%E8%A7%84%E9%81%BF%E6%96%B9%E6%B3%95/

问题1:跨域时,需要携带 Cookies

解决办法:对于ajax异步请求,需要添加参数 withCredentials: true

JQuery 实例:

1
2
3
4
5
6
7
$.ajax({
url: a_cross_domain_url,
// 将XHR对象的withCredentials设为true
xhrFields: {
withCredentials: true
}
});

注意:使用withCredentials=true 时,allow-origin 需要指定host,而不能使用*通配

例如:www.demo.com 进行跨域请求

1
2
3
4
5
// add_header Access-Control-Allow-Origin *; //错误写法
add_header Access-Control-Allow-Origin www.demo.com; // 正确写法
add_header Access-Control-Allow-Credentials true always;
add_header Access-Control-Allow-Headers Content-Type,Authorization,Accept,X-Requested-With,X-CSRF-TOKEN,withCredentials always;
add_header Access-Control-Allow-Methods GET,POST,OPTIONS,DELETE,PUT always;

问题2:跨域时,后台无法判断 is_ajax

通常情况下,后端通过头部是否存在'X-Requested-With': 'XMLHttpRequest'来断定异步请求

jquery ajax 跨域时,不携带此头部描述。

解决办法:

1. 提交时,带上X-Requested-With头部

1
2
3
4
$.ajax({
url: "http://your-url...",
headers: {'X-Requested-With': 'XMLHttpRequest'}
});

2. 设置crossDomain

1
2
3
4
$.ajax({
url: "http://your-url...",
crossDomain: false
});
你的鼓励是对我的最大支持