0


【跨域问题解决nginx+vue(简单版)】

一、nignx的配置 nginx.conf文件
server{
listen 9999;
server_name 172.99.99.9;(自己的linux服务器域名)
client_max_body_size 100m;
location / {
try_files $uri $uri/ /index.html;
root /home/aa/ngnix_vue/dist;
index index.html;
}
location /api {
proxy_pass http://172.99.99.9:5000/;(自己后端接口的访问路径)
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $remote_addr;
}
}
二、vue的配置
1、在main.js文件中添加

// axios 全局配置
let protocol = window.location.protocol; //协议
let host = window.location.host; //主机
let reg = /^localhost+/;
if(reg.test(host)) {
//若本地项目调试使用
axios.baseURL = ‘http://127.0.0.1:5000/api’;
} else {
//动态请求地址 协议 主机
axios.baseURL = protocol + “//” + host +":5000";
}
axios.create({
withCredentials:true, //跨域过程中,客户端必须要设置,允许ajax 携带cookie到服务器;
baseURL:‘http://127.0.0.1:5000/api’

});
// let axios =axios.create({
// withCredentials:true, //跨域过程中,客户端必须要设置,允许ajax 携带cookie到服务器;
// baseURL:‘http://127.0.0.1:5000/api’

// });

Vue.prototype.$ajax=axios;
Vue.use(VueAxios, axios);

以上的后来证实
没有这个必要
只需要再axios请求的url那里
填入后端的接口即可
比如后端的端口是5000
后端的服务器地址是172.25.25.1
那么请求的axios地址就填172.25.25.1:5000就可以

标签: vue.js nginx 前端

本文转载自: https://blog.csdn.net/sinat_30329151/article/details/123187372
版权归原作者 tony的学习中心 所有, 如有侵权,请联系我们删除。

“【跨域问题解决nginx+vue(简单版)】”的评论:

还没有评论