前端开发的童鞋,应该都有听过跨域请求,但这其中的细节可能还不清楚,比如:
<pre>
- 什么是跨域请求?
- 为什么会存在跨域请求?
- 跨域请求是怎么工作的?
- 如何解决跨域请求?
</pre>
1. 什么是跨域请求
跨域请求 - 访问其他域名的资源,随着业务的复杂化及前后端的分离,我们需要经常访问其他域名的资源,因此这里就涉及到跨域访问,下图给出了跨域访问的例子
image
2. 为什么会存在跨域请求
可能有童鞋就说了,何必这么麻烦,直接允许访问不就行了,也许前期就是这样,于是就出现了CSRF(跨站请求伪造),可以看下图:
image
因此网站A就必须添加访问限制,即决策是否允许网站B访问
3. 跨域请求是怎么工作的
跨域请求针对不同的请求会采用不用的策略,这里罗列如下:
3.1 简单模式(Simple requests)
请求方法:
GET
HEAD
POST
请求头:
Accept
Accept-Language
Content-Language
Content-Type
Content-Type:
application/x-www-form-urlencoded
multipart/form-data
text/plain
满足以上特征的请求就是Simple request,采用如下工作模式:
- 浏览器从网站B获取html资源
- 浏览器发送请求到网站A,并携带网站B的Origin,如Server-b.com
- 网站A检测自身的Access-Control-Allow-Origin是否包含Origin,如果包含返回正确数据,否则返回空
image
PS: Access-Control-Allow-Origin: * 表示允许所有网站方法
3.2 预检模式(Preflighted requests)
除了简单请求外,其他请求访问前需要先发一条预检请求,比如采用OPTIONS,采用如下工作模式:
- 浏览器从网站B获取html资源
- 浏览器发送OPTIONS请求,并携带如下信息
- Origin - 网站B域名
- Access-Control-Request-Method - 待请求方法,如POST
- Access-Control-Request-Headers - 待请求头信息
- 网站A检测自身的Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers是否包含客户端发送的值
- 如果包含,则返回200,浏览器发送真正的请求(也需要携带CROS信息),服务器返回正确数据
- 如果不包含,则返回错误,并返回Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers
image
4. 常见错误
- 4.1 Access-Control-Allow-Origin不匹配
一般会报如下错误:已拦截跨源请求:同源策略禁止读取位于 http://127.0.0.1:19110/uptoken 的远程资源。(原因:CORS 头 'Access-Control-Allow-Origin' 不匹配 '1')
解决方法:检测服务端配置的Access-Control-Allow-Origin,应该包含前端所在服务的域名
- 4.2 Access-Control-Allow-Headers不匹配
一般会报如下错误:已拦截跨源请求:同源策略禁止读取位于 http://127.0.0.1:19110/uptoken 的远程资源。(原因:来自 CORS 预检通道的 CORS 头 'Access-Control-Allow-Headers' 的令牌 'if-modified-since' 无效)
解决方法:检测服务端配置的Access-Control-Allow-Headers,应该包含前端发送的Access-Control-Request-Headers(可以抓包看前端发送的数据)