工装设计方案网站免费网络推广网站
目录
- 原因
- 总结：借助Nginx使得axios可跨域请求
原因
使用axios的时候，如果是开发环境下，WebStorm（IDEA）会自带跨域功能，说白了就是不用考虑跨域的事情了。但是在生产环境下，vue前端编译成静态文件，只是普通的http请求，所以根据浏览器的跨域规则（域名、端口、协议，一个不同就是跨域），不能发送请求，所以要借助反向代理工具，比如Nginx。
例如本来的开发环境请求是这样的：
export function getDeviceListById(code) {let url="https://fc-mp-f8364129-599d-437d-bf25-31dc95098b4c.next.bspapp.com/user/getDeviceDataByid?id="+code;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;charset=UTF-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;}