浏览器跨域问题之HTTP跨域响应头

摘要

本篇文章主要讲解HTTP中的几种响应头，解决web开发中常见的浏览器跨域问题CORS，主要包括了四个HTTP响应报文中的四个字段，同时讲解了如何携带cookie进行跨域。

0x01 浏览器跨域

什么是浏览器跨域？举个栗子，我有两个域名，分别是a.com和b.com，我在a.com这个网站上想通过AJAX请求去请求b.com上的某个接口，如果b.com上的接口不做特殊处理的话浏览器会爆出一个CORS（跨域资源共享）的错误，如下图所示。

Access to XMLHttpRequest at 'http://baidu.com/' from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

当前前后端分离开发盛行，跨域问题也随之而来，目前市面上最常使用两种方式。

• 使用JSONP
• 接口添加跨域响应头

这篇文章就讲一下接口添加某些响应头来解决跨域问题，其中包括简单的跨域和携带cookie跨域。

0x02 允许某些头的响应

响应首部 Access-Control-Expose-Headers 列出了哪些首部可以作为响应的一部分暴露给外部。

响应首部 Access-Control-Allow-Headers 用于 preflight request （预检请求）中，列出了将会在正式请求的 Access-Control-Request-Headers 字段中出现的首部信息。

这个头很重要，因为这个头不存在的情况下，添加允许跨的其他字段可能无效，所以首先要考虑将这个字段设置为*，也可以单独设置某些字段，具体的解释可查看这里。最简单的设置方式如下：

0x03 简单跨域Access-Control-Allow-Origin

Access-Control-Allow-Origin是一个允许跨域的响应头，其基本格式如下：

上面的响应头表示允许来自http://127.0.0.1:8080的请求，注意！注意！注意！最后面没有斜杠/，加上就会出错，使用时只需要在接口响应时操作一下响应头添加上面的响应字段即可，查看是否生效可以在Chrom浏览器中查看响应，如下。

这个头近代表允许某来源请求资源，但是，如果想携带cookie，那么还需要下面的响应头字段。

0x04 跨域允许Cookie携带

允许携带cookie的响应字段是Access-Control-Allow-Credentials，设置方式如下：

其值设置为true时表示跨域时允许携带cookie，注意，这个cookie一定是在被请求域名下的cookie，并且在非同一域名下在浏览器的请求头中是看不到的，抓包情况下可看到，浏览器下看到下图中的响应头。

0x05 总结

说了这么多，其实就一句话，设置下面的四个响应头字段。

不管何种编程语言，只要在接口响应之前加上上面的四个头，一定能解决跨域且携带Cookie问题，律师不上，后面的文章写几个DEMO，介绍几种编程语言的跨图问题解决。