起因:由于在自定义请求头后请求会从简单请求转变为复杂请求,(详情可以查看阮一峰先生的博客)复杂请求会提前发送一个预检请求与服务器进行沟通,大概类似于(预检请求:“我可以访问吗?”=> 服务器:“可以” =>真实请求),这里有个坑,因为无论服务器是否允许请求,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请求,避免后端报错跨域。