原因
使用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);
}
改为如下:文章来源:https://www.toymoban.com/news/detail-726248.html
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配置如下文章来源地址https://www.toymoban.com/news/detail-726248.html
# 反向代理
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访问路由,如果不配置就会导致跳转的时候报404
location / {
try_files $uri $uri/ /index.html;
}
总结:借助Nginx使得axios可跨域请求
到了这里,关于【vue】vue前端、生产(线上)环境请求unicloud云服务空间axios报错的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!