什么是跨域请求 CORS

Photo by Remotar Jobs / Unsplash

跨域请求原理

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

请求类型

首先,请求分为两种:简单请求(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-urlencodedmultipart/form-datatext/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 跨域请求验证。

IInfinity

IInfinity

大道虽简,知易行难。
CN