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

完结撒花!!!

相关推荐
霍克itxt点top10 小时前
NestJS 入门到实战 前端必学服务端新趋势无密分享
前端
xiguolangzi10 小时前
1panel web服务部署
前端
摘星编程10 小时前
Cursor Pair Programming:在前端项目里用 AI 快速迭代 UI 组件
前端·人工智能·ui·typescript·前端开发·cursorai
醉方休11 小时前
React Fiber 风格任务调度库
前端·javascript·react.js
北辰alk11 小时前
React Intl 全方位解析:为你的 React 应用注入国际化灵魂
前端
李白白i单身版11 小时前
前端VUE项目实现静默打印,无需用户手动确认
前端
bysking11 小时前
【29 - git bisect】git bisect 命令进行二分定位,排查异常commit bysking
前端
华仔啊11 小时前
摸鱼神器!前端大佬私藏的 11 个 JS 神级 API,复制粘贴就能用,效率翻倍
前端·javascript
一枚前端小能手11 小时前
🔥 React Hooks又让我重新渲染了999次!这些坑你踩过几个?
前端
我的写法有点潮11 小时前
Scss 的四种导入方式你都知道吗
前端·css