宁波网站优化平台,世界杯视频直播网站推荐,火车采集wordpress发布模块,天津东丽做网站目录 原因总结#xff1a;借助Nginx使得axios可跨域请求 原因
使用axios的时候#xff0c;如果是开发环境下#xff0c;WebStorm#xff08;IDEA#xff09;会自带跨域功能#xff0c;说白了就是不用考虑跨域的事情了。但是在生产环境下#xff0c;vue前端编译成静态文… 目录 原因总结借助Nginx使得axios可跨域请求 原因
使用axios的时候如果是开发环境下WebStormIDEA会自带跨域功能说白了就是不用考虑跨域的事情了。但是在生产环境下vue前端编译成静态文件只是普通的http请求所以根据浏览器的跨域规则域名、端口、协议一个不同就是跨域不能发送请求所以要借助反向代理工具比如Nginx。
例如本来的开发环境请求是这样的
export function getDeviceListById(code) {let urlhttps://fc-mp-f8364129-599d-437d-bf25-31dc95098b4c.next.bspapp.com/user/getDeviceDataByid?idcode;return axios.get(url);}改为如下
import request_app from /utils/requests-app;
export function getDeviceListById(code) {let data {id:code}return request_app({url: /user/getDeviceDataByid,method: get,params: data});
}// /utils/requests-app.js
import axios from axios;const requests_app axios.create({baseURL: /app,timeout: 10000,// 请求头headers: {Content-Type: application/json;charsetUTF-8,},
});
export default requests_app;Nginx配置如下 # 反向代理location /api/ {proxy_pass http://localhost:8080/;proxy_set_header x-forwarded-for $remote_addr;}# axios跨域处理 请求unicloud云服务空间location /app/{add_header Access-Control-Allow-Origin *;proxy_set_header x-forwarded-for $remote_addr;proxy_pass https://fc-mp-f8364129-599d-437d-bf25-31dc95098b4c.next.bspapp.com/;}# 配置url访问路由如果不配置就会导致跳转的时候报404location / {try_files $uri $uri/ /index.html;}总结借助Nginx使得axios可跨域请求
