详解ajax为什么会发送预检请求(OPTIONS)

背景 :最近在做项目的时候使用 axios 发送跨域请求时,会发现有些请求在请求之前先发送了一个 options 请求,也就是预检请求。

前提条件

必须是复杂的跨域请求

特别注意:以 vue 项目为例,不能在配置文件中配置代理(即 proxy 属性),不然不会出现跨域的情况。将跨域问题交给服务器来处理。

什么是跨域请求?

这里就不多赘述,可以参考这里 点击跳转链接

什么是复杂跨域请求?

简单的跨域请求,必须同时满足以下的三个条件

  1. 请求方式是以下三个其中之一:

    • HEAD

    • GET

    • POST

  2. HTTP的头信息不超出以下五个字段:

    • Accept

    • Accept-Language

    • Content-Language

    • Last-Event-ID

    • Content-Type

  3. Content-Type 的值是以下三个其中之一:

    • application/x-www-form-urlencoded

    • multipart/form-data

    • text/plain

复杂的跨域请求,条件满足以下三个其中之一:

  1. 请求方式不是 HEADGETPOST

  2. Content-Type 取的值不是以下三个之一:

    • application/x-www-form-urlencoded

    • multipart/form-data

    • text/plain

  3. 不能自定义 header 字段(最常见的就是自定义加了token、Cookie)

预检请求

  1. 使用 delete 发送预检请求
ts 复制代码
export function apiDelete(url) {
  return axios.delete(url);
}
  1. 使用 Content-Type 发送预检请求
js 复制代码
export function apiPost(url) {
  return axios.post(url, JSON.stringify({}), {
    headers: { "Content-Type": "application/json" },
  });
} 
  1. 使用 自定义请求头 发送预检请求
js 复制代码
export function apiGet(url) {
  return axios.get(url, {
    headers: { token: "token" },
  });
}

为什么会发送预检请求

非简单请求的 CORS 请求,会在正式通信之前,增加一次 HTTP 查询请求,称为 预检请求

需预检的请求要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器,以获知服务器是否允许该实际请求。预检请求 的使用,可以避免跨域请求对服务器的用户数据产生未预期的影响。

完结撒花!!!

相关推荐
zhougl9961 分钟前
html处理Base文件流
linux·前端·html
花花鱼5 分钟前
node-modules-inspector 可视化node_modules
前端·javascript·vue.js
HBR666_8 分钟前
marked库(高效将 Markdown 转换为 HTML 的利器)
前端·markdown
careybobo2 小时前
海康摄像头通过Web插件进行预览播放和控制
前端
杉之3 小时前
常见前端GET请求以及对应的Spring后端接收接口写法
java·前端·后端·spring·vue
喝拿铁写前端3 小时前
字段聚类,到底有什么用?——从系统混乱到结构认知的第一步
前端
再学一点就睡3 小时前
大文件上传之切片上传以及开发全流程之前端篇
前端·javascript
木木黄木木4 小时前
html5炫酷图片悬停效果实现详解
前端·html·html5
请来次降维打击!!!5 小时前
优选算法系列(5.位运算)
java·前端·c++·算法
難釋懷5 小时前
JavaScript基础-移动端常见特效
开发语言·前端·javascript