浅谈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字段以后，确认允许跨源请求
• 服务端同意预检请求，客户端会发送真正的请求；服务端不同意预检请求，因此触发一个错误，返回到客户端

注意

• 虽然可以通过设置响应头和响应方式等支持非简单请求,但是不到万不得已的情况,不能允许客户端发送非简单请求。因为非简单请求会使服务器比简单请求的多一倍的压力。