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