CROS 跨域排坑记

简单请求和非简单请求

浏览器将 CORS 请求分成两类:简单请求(simple request)和非简单请求(not-so-simple request)。

  • 请求方法是以下三种方法之一:
    • HEAD
    • GET
    • POST
  • HTTP 的头信息不超出以下几种字段:
    • Accept
    • Accept-Language
    • Content-Language
    • Last-Event-ID
    • Content-Type:只限于三个值:
      • application/x-www-form-urlencoded
      • multipart/form-data
      • text/plain

凡是不同时满足上面两个条件,就属于非简单请求。

浏览器对于非简单请求的处理

  • 自动发出一个”预检”请求,使用OPTIONS方法
  • 3 个关键头字段
    • Origin 表示请求来自哪个源
    • Access-Control-Request-Method *必需,列出浏览器的 CORS 请求会用到哪些 HTTP 方法
    • Access-Control-Request-Headers *非必需,列出浏览器 CORS 请求会额外发送的头信息字段

本地开发环境如何跨域联调

方法 1,chrome 插件

Allow-Control-Allow-Origin: *

此方法简单粗暴,但是缺点明显:如果服务端已指定 Access-Control-Request-Method,则此方法无效

方法 2,Charles /fiddler

以 Charles 为例:

menu

menu

menu

如果服务端已指定 Access-Control-Request-Method,可以修改之:

menu