浅谈CORS跨域请求的简单请求和非简单请求

在日常开发中,我们会发现同一个请求发送了两次,但是请求方式不同,这是因为CORS请求的简单请求和非简单请求的原因。

什么是CORS跨域请求的简单请求和非简单请求

  1. 同时满足两大条件,就属于简单请求
    • 请求方式:GET、POST、HEAD(注:什么是HEAD请求?HEAD请求和GET本质是一样的,但是HEAD请求不含数据,只有HTTP头部信息)
    • HTTP头部信息不超过一下几种字段:无自定义头部字段、Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type(只有三个值application/x-www-form-urlencoded、multipart/form-data、text/plain)
  2. 非简单请求
    • 请求方式:PUT、DELETE
    • 自定义头部字段
    • 发送json格式数据
    • 正式通信之前,浏览器会先发送OPTION请求,进行预检,这一次的请求称为“预检请求”
    • 服务器成功响应预检请求后,才会发送真正的请求,并且携带真实数据

客户端示例

$.ajax({
    url:'http://127.0.0.1:8000/getData.html',
    type:'put',
    success: function(data){
        console.log(data);
    },
})

网络请求返回示例:


image

image

服务端处理

  • 由于出现跨域的问题,所以服务端需要设置同意任意跨源请求:
    • Access-Control-Allow-Origin: *
  • 服务端的"OPTION-预检"里边一定要包含允许客户端使用非简单方式请求数据的响应头:
    • 预检”请求时,允许请求方式则需服务器设置响应头:Access-Control-Request-Method
    • 预检”请求时,允许请求头则需服务器设置响应头:Access-Control-Request-Headers
    • 预检”缓存时间,服务器设置响应头:Access-Control-Max-Age
  • 检查Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后,确认允许跨源请求
  • 服务端同意预检请求,客户端会发送真正的请求;服务端不同意预检请求,因此触发一个错误,返回到客户端

注意

  • 虽然可以通过设置响应头和响应方式等支持非简单请求,但是不到万不得已的情况,不能允许客户端发送非简单请求。因为非简单请求会使服务器比简单请求的多一倍的压力。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容