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


Posted in Javascript onNovember 04, 2020

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

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

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

解决办法如下:

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

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

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

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项目部署后跨域请求后端失败(已解决)

未解决前

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

验证码加载失败

解决后

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项目打包后请求地址错误/打包后跨域操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript Discuz代码中的msn聊天小功能
May 25 Javascript
Prototype 学习 工具函数学习($w,$F方法)
Jul 12 Javascript
如何防止回车(enter)键提交表单
May 11 Javascript
JavaScript获得页面base标签中url的方法
Apr 03 Javascript
原生JS和JQuery动态添加、删除表格行的方法
May 28 Javascript
jquery实现可自动判断位置的弹出层效果代码
Oct 12 Javascript
js实现文字闪烁特效的方法
Dec 17 Javascript
实用jquery操作表单元素的简单代码
Jul 04 Javascript
vue父组件中获取子组件中的数据(实例讲解)
Sep 27 Javascript
Node.js微信 access_token ( jsapi_ticket ) 存取与刷新的示例
Sep 30 Javascript
Vue2.0用户权限控制解决方案
Nov 29 Javascript
JavaScript中关于base64的一些事
May 06 Javascript
原生JavaScript实现贪吃蛇游戏
Nov 04 #Javascript
通过实例解析javascript Date对象属性及方法
Nov 04 #Javascript
解决vue项目打包上服务器显示404错误,本地没出错的问题
Nov 03 #Javascript
解决vant-UI库修改样式无效的问题
Nov 03 #Javascript
解决vant title-active-color与title-inactive-color不生效问题
Nov 03 #Javascript
如何在vue中使用百度地图添加自定义覆盖物(水波纹)
Nov 03 #Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 #Javascript
You might like
PHP学习之字符串比较和查找
2011/04/17 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
2011/11/02 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
PHP语法小结之基础和变量
2015/11/22 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
TP(thinkPHP)框架多层控制器和多级控制器的使用示例
2018/06/13 PHP
thinkPHP5框架接口写法简单示例
2019/08/05 PHP
一些Javascript的IE和Firefox(火狐)兼容性的问题总结及常用例子
2009/05/21 Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
2009/10/28 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
jQuery ajax调用WCF服务实例
2014/07/16 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
2015/12/11 Javascript
基于JavaScript实现 网页切出 网站title变化代码
2016/04/03 Javascript
基于JavaScript实现轮播图代码
2016/07/14 Javascript
KnockoutJS 3.X API 第四章之数据控制流if绑定和ifnot绑定
2016/10/10 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
超简单的Vue.js环境搭建教程
2017/03/17 Javascript
es7学习教程之Decorators(修饰器)详解
2017/07/21 Javascript
nodejs一个简单的文件服务器的创建方法
2019/09/13 NodeJs
JS canvas实现画板和签字板功能
2021/02/23 Javascript
Python多线程下载文件的方法
2015/07/10 Python
Python实现自定义顺序、排列写入数据到Excel的方法
2018/04/23 Python
基于Python实现人脸自动戴口罩系统
2020/02/06 Python
jupyter notebook清除输出方式
2020/04/10 Python
SmartBuyGlasses中国:唯视良品(销售名牌太阳镜、墨镜和眼镜框)
2017/07/03 全球购物
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
全球最大化妆品零售网站:SkinStore
2020/10/24 全球购物
必须要使用游标的SQL语句有那些
2012/05/07 面试题
人事档案接收函
2014/01/12 职场文书
会计专业毕业生求职信
2014/07/04 职场文书
校园广播稿范文
2015/08/19 职场文书
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android
Python中time标准库的使用教程
2022/04/13 Python