自定义请求头(token等)后预检请求被服务器拒绝(报跨域)的解决方法

当在Vue3应用中遇到跨域问题,特别是由于自定义请求头导致的复杂请求和预检请求(OPTIONS)时,可能会遇到预检请求状态码始终为200但实际跨域失败的情况。解决方法是在vue.config.js中配置代理,避免发送OPTIONS请求。在vue.config.js中设置代理服务器,将API请求转发到目标URL,从而绕过预检请求,简化跨域处理流程。
摘要由CSDN通过智能技术生成

起因:由于在自定义请求头后请求会从简单请求转变为复杂请求,(详情可以查看阮一峰先生的博客)复杂请求会提前发送一个预检请求与服务器进行沟通,大概类似于(预检请求:“我可以访问吗?”=> 服务器:“可以” =>真实请求),这里有个坑,因为无论服务器是否允许请求,options请求(预检请求)的状态码反馈都是200ok,最开始没反应过来,服务器拒绝了options请求并且报跨域,但是options请求一直都是200ok,导致一直在看真实请求的问题出在哪还有后端是不是没有配置跨域。最简单的方法是看看options请求有没有返回后端允许的请求信息,没有就是被拒绝了。

(没有在后端配置允许options请求是因为后端使用的别人封装好的框架无法更改,所以采用的这个方法)

解决方法:(一下仅为个人使用的方法,如果大佬有更好的方法欢迎分享)

配置代理,避免options请求。

在vue3中没有vue.config.js文件,在根目录下自己创建一个即可。然后再该文件中配置:

module.exports = {

  //相当于webpack-dev-server,  对本地服务器进行配置

  devServer: {

    proxy: {

      "/api": {

        target: "http://192.168.*.1**:8080",   //需要跨域的目标url ,我这里是自己本地起的一个服务端口

        changeOrigin: true,           // 将基于名称的虚拟托管网站的选项,如果不配置,请求会报404

        ws: true,

        pathRewrite: { // '^/api'是一个正则表达式,表示要匹配请求的url中,全部'http://localhost:8081/api' 转接为 http://localhost:8081/

          "^/api": ""

        },

        logLevel: "debug"//日志打印检查 不在浏览器上查看

      }

    }

  }

}

完成代理配置后即可避免发送options请求,避免后端报错跨域。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值