【vue】vue前端、生产(线上)环境请求unicloud云服务空间axios报错

目录

原因

使用axios的时候,如果是开发环境下,WebStorm(IDEA)会自带跨域功能,说白了就是不用考虑跨域的事情了。但是在生产环境下,vue前端编译成静态文件,只是普通的http请求,所以根据浏览器的跨域规则(域名、端口、协议,一个不同就是跨域),不能发送请求,所以要借助反向代理工具,比如Nginx。

例如本来的开发环境请求是这样的:

js 复制代码
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);
 }

改为如下:

js 复制代码
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
  });
}
js 复制代码
// @/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配置如下

js 复制代码
  # 反向代理
    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可跨域请求

相关推荐
艾小码8 分钟前
这份超全JavaScript函数指南让你从小白变大神
前端·javascript
reembarkation17 分钟前
vue 右键菜单的实现
前端·javascript·vue.js
00后程序员张2 小时前
Fiddler抓包工具使用教程,代理设置与调试方法实战解析(含配置技巧)
前端·测试工具·ios·小程序·fiddler·uni-app·webview
gplitems1236 小时前
Consua WordPress Theme — Business Consulting Sites That Convert With Clarity
javascript
雾削木7 小时前
stm32解锁芯片
javascript·stm32·单片机·嵌入式硬件·gitee
2301_768350238 小时前
Vue第二期:组件及组件化和组件的生命周期
前端·javascript·vue.js
小周同学:8 小时前
Vue项目中将界面转换为PDF并导出的实现方案
javascript·vue.js·pdf
华洛9 小时前
公开一个AI产品的商业逻辑与设计方案——AI带来的涂色卡自由
前端·后端·产品
明远湖之鱼9 小时前
opentype.js 使用与文字渲染
前端·svg·字体
90后的晨仔10 小时前
Vue 3 组合式函数(Composables)全面解析:从原理到实战
前端·vue.js