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.js

module.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.conf

server {
    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/;
	}
}