跨域 服务预检 服务器响应问题

今天使用axios 跨域post时遇到问题

axios.post("url",{'data':"1"}).then(function(res){
　　...
})

request header：明明使用了post

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: zh-CN,zh;q=0.9
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Connection: keep-alive
Host: localhost:81
Origin: http://localhost:8080
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.62 Safari/537.36

general：实际使用了OPTIONS 操作！

Request URL: http://localhost:81/v1/login/signup
Request Method: OPTIONS
Status Code: 200 OK
Remote Address: 127.0.0.1:81
Referrer Policy: no-referrer-when-downgrade

浏览器还给我报：说服务器没有允许你用 这个头“Access-Control-Request-Headers:content-type” 需要加 "Access-Control-Allow-Headers:content-type"

Failed to load http://localhost:81/v1/login/signup: Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

当时十脸懵逼 跨域不是服务器只要有这些就ok了么？

Access-Control-Allow-Method

Access-Control-Allow-Origin

后来看了下：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

原来跨域还分简单请求 和复杂请求 ---我擦

复杂的请求还要 客户端先发送一个预检请求，用于向服务器询问 是否允许这个Access-Control-Request-Headers:xxxx 的请求

服务器需要响应：Access-Control-Allow-Headers:xxxx 才被认为允许本次请求

再发送请求（需要跨域）的数据

参考1：https://www.cnblogs.com/linxingyun/p/6772937.html

参考2：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS