vue axios跨域 Request Method: OPTIONS问题

在进行跨域登录功能开发时,发现在使用axios进行POST请求时,实际请求方法变为OPTIONS。这涉及到简单跨域请求与复杂跨域请求的区别,OPTIONS请求是复杂跨域请求的预检阶段。当请求方法非GET/HEAD/POST,POST请求Content-Type不为规定类型,或设置了自定义header时,会触发OPTIONS预请求。axios的默认设置可能导致这个问题。解决办法包括正确设置Content-Type或调整axios配置。
摘要由CSDN通过智能技术生成

今天做跨域登录功能遇到这个问题(后端已做跨域处理):
当跨域请求为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 => {
   
  	------------解决方法---
  • 1
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值