黑蜘蛛网站,价格划算的常州做网站,泰安网站建设方案,在手机上建设网站教程一、通过 proxy 解决跨域
1.1 baseURL 配置
对 axios 二次封装时#xff0c;baseURL 设置为 /api。
const serviceAxios axios.create({baseURL: /api,timeout: 10000, // 请求超时设置withCredentials: false, // 跨域请求是否需要携带 cookie
});1.2 vue.config.js 配置…一、通过 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/;}
}
