Vue笔记：options预检请求

第一次遇到options请求，看了一些资料和别人的博客才有所了解

第一步，先了解了几个概念：

CORS：（Cross-Origin Resource Sharing，跨域资源共享）是一个系统，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端 JavaScript 代码获取跨域请求的响应。（参考MDN术语表）

同源安全策略 默认阻止“跨域”获取资源。但是 CORS 给了web服务器这样的权限，即服务器可以选择，允许跨域请求访问到它们的资源。

简单请求和非简单请求：

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

满足一下条件就是简单请求：

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

不满足以上条件的就是非简单请求。
options请求：(参考MDN)

OPTIONS 方法可以用来检测服务器支持哪些 HTTP 方法：

curl -X OPTIONS http://example.org -i

CORS 中的预检请求：(参考MDN)

在 CORS 中，可以使用 OPTIONS 方法发起一个预检请求，以检测实际请求是否可以被服务器所接受。预检请求报文中的 Access-Control-Request-Method 首部字段告知服务器实际请求所使用的 HTTP 方法；Access-Control-Request-Headers 首部字段告知服务器实际请求所携带的自定义首部字段。服务器基于从预检请求获得的信息来判断，是否接受接下来的实际请求。

第二步，产生options请求

MDN的CORS一文中提到：

规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。

所以这个跨域请求触发了浏览器自动发起OPTIONS请求，看看此次跨域请求具体触发了哪些条件。

目前就我了解的是，若是非简单请求，就会产生options请求。（现在还是前端小菜瓜，以后遇到不同情况再补充）

第三步，避免触发options请求

（目前只知道一种-_-）

将数据调整为字符串数据，引起content-type变为www键值对。（因为一开始数据是对象，所以content-type是application/json）

this.$axios.post('postcomment/300',
	'content=今天又是收获满满的一天'
    //注释部分数据是对象方式，content-type是application/json
    //{
    //  content:'传智27期，再次霸气的一批'
    // }
    )

参考链接:（谢谢各位的帮助）

https://zhuanlan.zhihu.com/p/46405073

https://blog.csdn.net/gu_wen_jie/article/details/84172410

https://juejin.im/post/5cb3eedcf265da038f7734c4