详解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 方法发起一个预检请求到服务器,以获知服务器是否允许该实际请求。预检请求 的使用,可以避免跨域请求对服务器的用户数据产生未预期的影响。

完结撒花!!!

相关推荐
excel3 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着4 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友5 小时前
什么是API签名?
前端·后端·安全
会豪7 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子7 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶7 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子7 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_8 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23338 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin8 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js