什么是跨域请求 CORS

跨域请求原理

简单来说，跨域请求是一个白名单机制，没有允许就是禁止。

请求类型

首先，请求分为两种：简单请求（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. 是简单请求

1. 浏览器在头信息中添加一个 Origin 字段，表明自己是来自 网站 A 的用户
2. 浏览器将该请求发送给 网站 B 的服务器
3. 服务器回应，如果在响应头中包含了 Access-Control-Allow-Origin: 网站 A，那么本次跨域请求就是合法的
4. 否则，浏览器会认为本次请求为非法请求，并报错（即 CORS Block）

2. 不是简单请求

1. 浏览器向 网站 B 发送一个 OPTION 请求，表明自己是来自 网站 A 的用户
2. 服务器响应 OPTION 请求
3. 如果服务器正常响应，并在响应头中包含了 Access-Control-Allow-Origin: 网站 A ，那么浏览器会继续发送后续的 GET 请求
4. 如果服务器响应的是非 200 OK（比如 404 NOT FOUND，服务器未设置跨域请求相关内容），那么浏览器会认为此次跨域请求权限不足，取消后续的 GET 请求
5. 如果服务器响应的是 200 OK，但响应头不包含 网站 A，那么浏览器同样会认为权限不足，取消后续的 GET 请求

问题所在

服务器未设置 OPTION 响应，或不允许该域名进行 CORS 请求。

修改服务器的相关配置是最直接的方法，但在开发中也可以通过搭建本地代理服务器的方式来绕过 CORS 跨域请求验证。