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

完结撒花!!!

相关推荐
墨鱼鱼4 分钟前
【征文计划】Rokid JSAR 实践指南:打造沉浸式 "声动空间盒" 交互体验
前端
携欢7 分钟前
Portswigger靶场之Exploiting a mass assignment vulnerability通关秘籍
前端·安全
什么芋泥香蕉33015 分钟前
比 Manus 还好用?这款国产 AI,让 Python 小白也能玩转编程
前端·后端
为java加瓦15 分钟前
前端学AI:如何写好提示词(prompt)
前端·人工智能·prompt
qq_18417767723 分钟前
前端自动部署项目到服务器
服务器·前端·javascript
非凡ghost25 分钟前
猫眼浏览器(Chrome内核增强版浏览器)官方便携版
前端·网络·chrome·windows·软件需求
C2X39 分钟前
Vue3.0 学习总结
前端
汤姆Tom41 分钟前
CSS 新特性与未来趋势
前端·css·面试
尘世中一位迷途小书童42 分钟前
🚀 pnpm + Monorepo 实战指南:现代前端项目管理的最佳实践
前端·架构
杨超越luckly1 小时前
HTML应用指南:利用GET请求获取全国中国建设银行网点位置信息
前端·arcgis·html·数据可视化·门店数据