前端开发的童鞋,应该都有听过跨域请求,但这其中的细节可能还不清楚,比如:

* 什么是跨域请求?
* 为什么会存在跨域请求?
* 跨域请求是怎么工作的?
* 如何解决跨域请求?

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(可以抓包看前端发送的数据)

更多

  1. 跨域是浏览器行为
  2. HTTP access control (CORS)
  3. 浅谈CSRF攻击方式