vue axios跨域 Request Method: OPTIONS问题

2023-11-05

今天做跨域登录功能遇到这个问题(后端已做跨域处理):
当跨域请求为post时候,请求的method变为了options。
在这里插入图片描述
其实跨域分为 简单跨域请求和复杂跨域请求:
简单跨域请求是不会发送options请求的
复杂跨域请求会发送一个预检请求options
复杂跨域请求要满足以下:
1、请求方法不是GET/HEAD/POST
2、POST请求的Content-Type并非application/x-www-form-urlencoded, multipart/form-data, 或text/plain
3、请求设置了自定义的header字段

参考链接

axios默认设置的['Content-Type']application/json,会引发复杂跨域请求,就是所谓的method为options的现象,此阶段为预请求 阶段,此阶段通过后才会发送正式的post请求。
其中引入qs模块是为了解析浏览器把参数当作字符串请求数据,导致请求参数无法传递到后台。
观察浏览器network发现两种方法最后的效果都是将Content-Type都变成了application/x-www-form-urlencoded
解决方法:

// request拦截器
service.interceptors.request.use(
  config => {
   
  	----------
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

vue axios跨域 Request Method: OPTIONS问题 的相关文章

随机推荐

  • 西门子S7-1200PLC脉冲控制伺服程序案例

    西门子S7 1200PLC脉冲控制伺服程序案例 此程序是关于西门子1200PLC以PTO脉冲方式控制伺服电机 步进电机的功能块程序 包含两套程序 第一套程序是用梯形图写的 第二套程序是用SCL高级编程语言写的 两套程序实现的功能一致 脉冲模
  • C++——内存分区

    内存分区模型 内存分区 四大分区 编译后运行前 程序运行后 栈区 堆区 1 new使用 2 释放空间 3 new 数组 内存分区 四大分区 代码区 二进制代码 操作系统管理 全局区 全局变量 静态变量 常量 栈区 编译器自动分配释放 函数的
  • laravel 8实现 订单表按月份水平分表

    实现思路 1 设计基础表orders 2 通过后台代码创建今年6月份订单表 order 202206 今年7月份订单表 order 202207 创建表的时候需要进行判断 如果表存在 则不需要创建 这个后台代码会被多次使用并可以重复使用 选
  • Android 开发最佳实践

    https github com futurice android best practices blob master translations Chinese README cn md 组织好它们 在layoutout XMLs布局时
  • windows 向 iPad导入文件

    iPad导入 步骤 截图 步骤 Windows 下载 iTunes 打开 iTunes 账户 gt 授权 gt 对这台电脑授权 然后输入账户密码登陆 找到当前设备 gt 文件共享 gt 找到对应程序 gt 添加文件 截图
  • elementPlus自动按需导入图标

    最近在使用Vue3重构自己的项目 需要用到elementPlus里面的图标 vite中已经配置了elementPlus中的组件自动按需引入 看看图标引入的相关文档 没道理为了图标又全局引入elementPlus吧 于是就有了图标自动按需引入
  • es or查询

    跨索引查询 SearchRequest request new SearchRequest index1 index2 想实现类似于 select from table where a 1 and b 1 or startTime gt 2
  • 数据结构与算法(十)图的入门

    图的实际应用 在现实生活中 有许多应用场景会包含很多点以及点点之间的连接 而这些应用场景我们都可以用即将要学习的图这种数据结构去解决 地图 我们生活中经常使用的地图 基本上是由城市以及连接城市的道路组成 如果我们把城市看做是一个一个的点 把
  • 传输层的TCP和UDP

    TCP IP 中有两个具有代表性的传输层协议 分别是 TCP 和 UDP TCP 是面向连接的 可靠的流协议 流就是指不间断的数据结构 当应用程序采用 TCP 发送消息时 虽然可以保证发送的顺序 但还是犹如没有任何间隔的数据流发送给接收端
  • 【MySQL SQL语句】DROP TABLE简述

    标准语法 DROP TEMPORARY TABLE IF EXISTS tbl name tbl name RESTRICT CASCADE DROP TABLE 删除一个或多个表 你必须对每个表具有DROP权限 注意 使用此语句时要小心操
  • 打开Vue项目时出现“error:03000086:digital envelope routines::initialization error”的解决方法

    首先看用 VSCode 打开 Vue项目 清除 npm 缓存 因为 npm 有缓存时 常常出现安装依赖不成功的现象 并且一旦出现问题 报错信息很完善 但根据报错信息一项一项去解决 却很容易陷入解决不了关键问题的死循环当中 找不出原因 控制台
  • 瑞芯微RK3128的gpio控制--输入输出和中断

    第一章 gpio的dts设置 1 输出引脚 reset gpios lt gpio0 GPIO D1 GPIO ACTIVE HIGH gt 以上参数分别对应 引脚的名称 第几组gpio 第几个引脚 工作模式 注 以上配置对应为 GPIO0
  • 20.状态模式

    状态模式 一 状态模式 1 状态模式 1 状态模式 State Pattern 它主要用来解决对象在多种状态转换时 需要对外输出不同的行为的问题 状态和行为是一一对应的 状态之间可以相互转换 2 当一个对象的内在状态改变时 允许改变其行为
  • NodeJs创建应用基本流程

    1 创建根目录 2 初始化package json npm init y 3 创建入口文件app js var express require express var path require path var app express ap
  • 【LeetCode】55. 跳跃游戏(给定一个非负整数数组,你最初位于数组的第一个位置。 数组中的每个元素代表你在该位置可以跳跃的最大长度。)、45. 跳跃游戏 II

    55 跳跃游戏 给定一个非负整数数组 你最初位于数组的第一个位置 数组中的每个元素代表你在该位置可以跳跃的最大长度 判断你是否能够到达最后一个位置 示例 1 输入 2 3 1 1 4 输出 true 解释 从位置 0 到 1 跳 1 步 然
  • java.lang.IndexOutOfBoundsException: Index: 6, Size: 6异常出现的可能原因

    我出现这个异常的情况是 xml中修改了sql语句 然后调用接口时报了这个异常 1 首选确认写的sql无误 在数据库中直接查询 能够成功 2 我的解决方法和问题所在是 修改了sql语句 比如说原来的sql中查出了A字段 和这个sql对应的实体
  • 一、Conflux 网页钱包创建

    相信每一位新加入的小伙伴都有一个疑问 去中心化的钱包到底是什么 如何拥有一个自己钱包 如何使用这个钱包吧 下面我将会为大家讲解如何创建钱包 导入钱包 使用钱包三个方面讲解下 一 创建钱包 首先大家进入钱包网站登录页面 大家可以将该网址收藏
  • JVM 类加载机制、双亲委派

    JVM类加载的步骤 加载 gt 连接 gt 初始化 gt 使用 gt 卸载 其中连接包括 验证 gt 准备 gt 解析三个阶段 下面介绍每个部分的作用 加载 加载是类加载过程中的一个阶段 这个阶段会在内存中生成一个代表这个类的 java l
  • 做视频剪辑可以在哪里接单赚钱?

    如果你自己会一点剪辑技术 想赚点钱还是挺容易的 可以接单剪辑视频 可以做视频账号等等 不说轻松月入过万 每天100 300还是可以做到的 那会视频剪辑可以通过哪些方式赚钱呢 有哪些渠道呢 今天这期内容大周花了一晚上总结了一些赚钱的渠道 分享
  • vue axios跨域 Request Method: OPTIONS问题

    今天做跨域登录功能遇到这个问题 后端已做跨域处理 当跨域请求为post时候 请求的method变为了options 其实跨域分为 简单跨域请求和复杂跨域请求 简单跨域请求是不会发送options请求的 复杂跨域请求会发送一个预检请求opti