Vue 跨域的两种解决方式

一、通过 proxy 解决跨域

1.1 baseURL 配置

对 axios 二次封装时，baseURL 设置为 '/api'。

const serviceAxios = axios.create({baseURL: '/api',timeout: 10000, // 请求超时设置withCredentials: false, // 跨域请求是否需要携带 cookie
});

1.2 vue.config.js 配置 proxy 代理

在 vue.config.js 的 target 填入后端真实运行的接口地址。

pathRewrite 的作用是将 /api 接口前缀重写，我这边是置为空，因为后端的控制层并没有去匹配 /api。

// vue.config.jsmodule.exports = defineConfig({devServer: {// 配置跨域proxy: {'/api': {target: 'http://yunhu.com:8090/',ws: false,changOrigin: true,  // 允许跨域pathRewrite: {'^/api': ''}}}}
})

二、通过 nginx 反向代理实现跨域

2.1 baseURL 配置

对每一个请求的前缀都加上 /api，然后再在 nginx 中配置转发策略。

const serviceAxios = axios.create({baseURL: "http://yunhu.com:9049/api/",timeout: 10000, // 请求超时设置withCredentials: false, // 跨域请求是否需要携带 cookie
});

2.2 nginx 配置

nginx 监听 9049 端口，然后将接口前缀是 /api 的转发到 8090 端口，就是运行 Spring Boot 后端程序的那个端口。

由于我们的后端控制层并没有 /api，所以这边也需要 rewrite 将 /api 重写为空。

这边 proxy_pass，也可以是 http://yunhu.com:8090/，但是我用了内网地址，不用再通过 DNS 解析了，可以提高一点点性能。

# nginx.confserver {listen 9049;location / {root /root/library/library-web-vue/dist;index index.html index.htm;}location ^~/api/ {rewrite ^/api/(.*)$ /$1 break;proxy_pass http://10.0.12.16:8090/;}
}