一、通过 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/;}
}
