跨域请求原理
简单来说,跨域请求是一个白名单机制,没有允许就是禁止。
请求类型
首先,请求分为两种:简单请求(Simple Request)和非简单请求(Not-So-Simple Request),满足以下要求的即是简单请求,否则就是非简单请求:
(1)请求方法是以下三种方法之一:
- HEAD
- GET
- POST
(2)HTTP的头信息不超出以下几种字段:
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type:只限于三个值
application/x-www-form-urlencoded
、multipart/form-data
、text/plain
请求流程
假定,用户在 网站 A 需要通过 GET 方式 访问一个位于 网站 B 的跨域 URL,那么整个请求流程如下:
1. 是简单请求
- 浏览器在头信息中添加一个
Origin
字段,表明自己是来自 网站 A 的用户 - 浏览器将该请求发送给 网站 B 的服务器
- 服务器回应,如果在响应头中包含了
Access-Control-Allow-Origin: 网站 A
,那么本次跨域请求就是合法的 - 否则,浏览器会认为本次请求为非法请求,并报错(即 CORS Block)
2. 不是简单请求
- 浏览器向 网站 B 发送一个 OPTION 请求,表明自己是来自 网站 A 的用户
- 服务器响应 OPTION 请求
- 如果服务器正常响应,并在响应头中包含了
Access-Control-Allow-Origin: 网站 A
,那么浏览器会继续发送后续的 GET 请求 - 如果服务器响应的是非
200 OK
(比如404 NOT FOUND
,服务器未设置跨域请求相关内容),那么浏览器会认为此次跨域请求权限不足,取消后续的 GET 请求 - 如果服务器响应的是
200 OK
,但响应头不包含 网站 A,那么浏览器同样会认为权限不足,取消后续的 GET 请求
问题所在
服务器未设置 OPTION 响应,或不允许该域名进行 CORS 请求。
修改服务器的相关配置是最直接的方法,但在开发中也可以通过搭建本地代理服务器的方式来绕过 CORS 跨域请求验证。