[HTTP趣谈]支持跨域及相关cookie设置

娜姐

发布于 2020-09-22 10:46:23

2.1K0

发布于 2020-09-22 10:46:23

文章被收录于专栏：娜姐聊前端

如今“前后端分离”的设计思想已经非常普及，所以一旦静态资源和后台应用部署在不同服务器上并采用不同域名，那么，必然会遇到“浏览器同源策略”的限制，也必然，需要前后台一起合作解决跨域问题。

1. 同源策略

什么样的URL是同源的？其必须满足下面三个条件：

协议号相同
域名相同
端口相同

比如，a.com网站，想要访问b.com网站api，比如api.b.com。那么，在“同源策略”限制下，a.com网站无法获取api.b.com下的cookie，也无法向api.b.com发送ajax请求。

2. 如何支持跨域

最简单的方式是后台服务器将允许跨域访问的URL添加到白名单中，这样，前台应用不需要做任何特殊处理。

另外，还有两种常用方法：

1) JSONP

基本思想为：网页通过添加一个<script>元素，向服务器请求JSON数据，服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。用src属性请求资源的标签，比如<link>，<img>，<script>...都不受同源策略的限制。

<body>
<button onclick="loadData()">LoadData</button>
<script>
    function foo(res){
        console.log(res)
    }

    function loadData(){
        var elem = document.createElement('script');
        elem.src = 'http://a.com/jsonp?callback=foo';
        document.head.appendChild(elem);
    }
</script>
</body>

用JSONP，浏览器会自动在request header里面带上a.com下的cookie信息。其实，通过src调用api都是GET方式，类似请求资源文件，必须明确，从Web页面产生的文件请求都会带上cookie。

因此，JSONP的缺点很明显了：

只支持GET请求
只能带本域下的cookies

2) CORS（Cross-origin resource sharing）

CORS是一个W3C标准，全称是"跨域资源共享"。它运行浏览器向跨域服务器发送AJAX请求。

小贴士

IE10以上用XMLHttpRequest对象实现CORS；
IE8，IE9用XDomainRequest支持CORS。

整个CORS跨域，是浏览器自动完成，不需要前端特殊处理。浏览器一旦发现是AJAX请求跨域，会添加origin头信息，后台应用需要根据request header中的origin/referer，来设置正确的response header，完成跨域请求。

cors.png

CORS具体的概念和讲解，网上很多资料，包括什么是简单请求和“Preflighted”，请参考 https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS。

下面要重点提到的是，CORS下，前端如何携带cookies?

Requests with credentials

用JS/JQuery启动AJAX请求时，必须设置withCredentials头为true，写法如下：

JS:
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open('POST', ‘a.com’, true);
xhr.send();

JQuery:
$.ajax({
  url: a_cross_domain_url,
  xhrFields: {
    withCredentials: true
  }
});

这时，后台设置response header时，需要返回：

Access-Control-Allow-Credentials: true;
Access-Control-Allow-Origin: a.com; //必须为具体域名，不能是*

重点需要注意的是cookies信息！！！这时，request请求中可以携带的cookies，不仅仅有本域下的cookies，还包括跨域服务器下设置的cookies（注意：跨域服务器下的cookies，是无法通过JS代码document.cookie访问，该cookies只能被远程服务器控制）。

可见，在安全性上，CORS比JSONP强悍很多！

CORS缺点是，低版本的IE浏览器支持不好。