vue项目打包后请求地址错误/打包后跨域操作

 更新时间:2020年11月04日 08:46:31   作者:一抹多  
这篇文章主要介绍了vue项目打包后请求地址错误/打包后跨域操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

vue项目 npm run dev时跨域请求正常,但是打包后请求地址就错误(请求地址不存在),请求不到数据。

在vue项目中常用的是proxyTable代理跨域,这个用起来比较方便,但是当项目打包后就遇到这个问题了。

解决办法如下:

打开config文件夹下的index.js文件,添加以下代码

pathRewrite: {
 '^api':'https://*****.com' //填写需要跨域的地址
}

2.配置开发环境地址,就是config文件夹下的dev.env.js文件,添加以下代码:

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_HOST:'"/api"' //配置代理路径的符号
})

3.配置生产环境地址,就是config文件夹下的prod.env.js文件,添加以下代码:

'use strict'
module.exports = {
 NODE_ENV: '"production"',
 API_HOST:'"https://**********.com/api"' //生产环境的地址
}
})

如果接口地址没有api这个公共路径就不要添上了。

4. 接下来就该在组件中使用了。

 methods : {
  getData() {
  let _this = this;
  this.http(this,{
  //process.env.API_HOST 获取当前环境的api地址
   url : process.env.API_HOST+'/platform/index/new',
   // headersType : 1 //token
  }).then(res=>{
   this.ShowSkeleTon = true;
   this.list = res.list;
  },err=>{
   console.log(err);
  });
  },
 },

然后就是修改所有组件中的url地址了

虽然比较麻烦,但可以完美解决这个问题。这样即使打包后也可以请求到数据了。

补充知识:vue项目部署后跨域请求后端失败(已解决)

未解决前

验证码加载失败

解决后

验证码加载成功

解决办法

在 nginx/conf/nginx.conf 下做如下配置

server {
 listen 8080;  # 监听的端口号
 server_name 127.0.0.1; # 服务器的ip地址
 root /usr/local/nginx/html; # 服务器中项目所在文件夹
 #charset koi8-r;
 #access_log logs/host.access.log main;
 location / {
  # root /usr/local/nginx/html/;
  try_files $uri $uri/ /index.html;
  index index.html index.htm;
 }
 # 解决跨域请求
 location /req {
  rewrite ^.+req/?(.*)$ /$1 break;
  proxy_pass http://127.0.0.1; #第一个跨域请求的地址
  proxy_redirect off;
  proxy_set_header Host $host;
  proxy_set_header X-Real-IP $remote_addr;
  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
 }
 # 解决跨域请求
 location /api {
  proxy_pass http://127.0.0.1:/login; # 第二个跨域请求的地址
  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection ‘upgrade';
  proxy_set_header Host $host;
  proxy_cache_bypass $http_upgrade;
 }
 }

注意:以上提供了两种解决方法,但是当两个都使用第二中方法时会出现问题。

以上这篇vue项目打包后请求地址错误/打包后跨域操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 详解vuejs几种不同组件(页面)间传值的方式

    详解vuejs几种不同组件(页面)间传值的方式

    本篇文章主要介绍了详解vuejs几种不同组件(页面)间传值的方式,具有一定的参考价值,有兴趣的可以了解一下
    2017-06-06
  • Vue组件渲染与更新实现过程浅析

    Vue组件渲染与更新实现过程浅析

    这篇文章主要介绍了Vue组件渲染与更新实现过程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2023-03-03
  • vue封装动态表格方式详解

    vue封装动态表格方式详解

    这篇文章主要为大家介绍了vue封装动态表格方式示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-08-08
  • Spring boot 和Vue开发中CORS跨域问题解决

    Spring boot 和Vue开发中CORS跨域问题解决

    这篇文章主要介绍了Spring boot 和Vue开发中CORS跨域问题解决,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-09-09
  • Vue.js获取被选择的option的value和text值方法

    Vue.js获取被选择的option的value和text值方法

    今天小编就为大家分享一篇Vue.js获取被选择的option的value和text值方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue动态绑定多个class以及带上三元运算或其他条件

    vue动态绑定多个class以及带上三元运算或其他条件

    这篇文章主要介绍了vue动态绑定多个class以及带上三元运算或其他条件,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • vue中vue-cli项目报错sockjs.js报错问题

    vue中vue-cli项目报错sockjs.js报错问题

    这篇文章主要介绍了vue中vue-cli项目报错sockjs.js报错问题,具有很好的参考价值,希望对大家有所帮助。
    2022-12-12
  • vue实现商品列表的无限加载思路和步骤详解

    vue实现商品列表的无限加载思路和步骤详解

    这篇文章主要介绍了vue实现商品列表的无限加载思路和步骤详解,基础思路是触底条件满足之后 page++,拉取下一页数据,结合实例代码给大家介绍的非常详细,需要的朋友可以参考下,
    2024-06-06
  • vue3简易实现proxy代理实例详解

    vue3简易实现proxy代理实例详解

    这篇文章主要为大家详细介绍了Python实现学生成绩管理系统,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-03-03
  • 一篇带你搞懂Vue项目里的权限控制

    一篇带你搞懂Vue项目里的权限控制

    这篇文章主要为大家介绍了vue项目里的权限控制,文中有详细的代码示例供大家参考,有需要的朋友可以借鉴参考下,希望能够有所帮助
    2023-06-06

最新评论