vue3.0 proxy设置代理不成功

一.设置proxy

首先在项目中创建vue.config.js

注意在ts环境下仍为js结尾

项目配置详情如下：

1. module.exports ={
2. devServer: {
3. open: false, // 是否自动弹出浏览器页面
4. proxy: {
5. '/api': { // '/api'是代理标识，用于告诉node，url前面是/api的就是使用代理的
6. target: "http://localhost:3000", //目标地址，一般是指后台服务器地址
7. changeOrigin: true, // 是否跨域
8. ws: true, // 是否代理 websockets
9. secure: false, // 是否https接口
10. // pathRewrite: { // pathRewrite 的作用是把实际Request Url中的'/api'用""代替 如果有则不需要此属性
11. // '^/api': "/api"
12. // }
13. }
14. }
15. }
16. }

二.问题出现

结果运行依然报错

三.解决方案

最后还是出现在axios的默认基本路径的配置和代理发生了冲突，代理本身是将请求基本路径代理到目标基本路径

比如:

项目基本路径是http:localhost:8080

axios 基本路径却设置为http:localhost:3000,

代理目标路径为：http:localhost:3000

此时项目启动仍然报错跨域

所以axios的基本路径要么设置为项目启动路径http:localhost:8080要么设置为空

此时问题解决