XMLhttpRequest进行POST请求时跨域系统CORS误报错“Access-Control-Allow-Origin”

本人是OldSchool类型的人，做项目也喜欢刨根问底，因此没有选用form表单或jq进行POST请求发送，还是XMLhttpRequest更舒服。

image.png

进行的时候报了一个很奇怪的错误，怎么会触发跨域保护(CORS)系统呢，后端甚至还没有收到请求的时候就触发了，后端也有允许跨域的设置。我搜索了网上很多解决办法，最后在请求头里找到了猫腻：

image.png

“[临时标头](Network features reference - Chrome Developers)已显示”

这表示我设置了一个不被认可的标头(临时标头指的是不在策略里的头)，可以看出来是content-type出了问题（并不是因为大小写），并触发了"strict-origin-when-cross-origin"策略最后报了跨域保护CORS的错。

image.png

从MDN官网看出，官方并没有列举在POST请求中对Content-Type使用application/json这个标头，最后我修改为了application/x-www-form-urlencoded问题得以解决。很匪夷所思只要使用application/json这个标头就会触发CORS报错

image.png

关于application/x-www-form-urlencoded标头，在使用这个标头时，可以把提交的数据写成这样的字符串格式，最后就会以表单的形式提交到后端，后端可以直接使用GetParam等函数直接获取值

image.png

也可以按照MDN说的，请求主体是任何类型，那就去掉设置ContentType标头的过程，最后会以负载的形式提交数据

image.png

image.png