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下利用fso判断文件是否存在的代码
Dec 11 Javascript
JS+CSS实现可拖动的弹出提示框
Feb 16 Javascript
JS上传图片前实现图片预览效果的方法
Mar 02 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
浅谈javascript中执行环境(作用域)与作用域链
Dec 08 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
关于Stream和Buffer的相互转换详解
Jul 26 Javascript
详解在vue-cli中使用graphql即vue-apollo的用法
Sep 08 Javascript
elementUI select组件value值注意事项详解
May 29 Javascript
JavaScript判断数据类型有几种方法及区别介绍
Sep 02 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实现假装商品限时抢购繁忙的效果
2015/10/16 PHP
简单谈谈PHP中strlen 函数
2016/02/27 PHP
JavaScript实际应用:innerHTMl和确认提示的使用
2006/06/22 Javascript
js控制input输入字符解析
2013/12/27 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
JavaScript中的boolean布尔值使用学习及相关技巧讲解
2016/05/26 Javascript
Js动态设置rem来实现移动端字体的自适应代码
2016/10/14 Javascript
node.js+jQuery实现用户登录注册AJAX交互
2017/04/28 jQuery
如何使用webpack打包一个库library的方法步骤
2019/12/18 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
2020/01/12 Javascript
javascript实现贪吃蛇小练习
2020/07/05 Javascript
python编写网页爬虫脚本并实现APScheduler调度
2014/07/28 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
运用TensorFlow进行简单实现线性回归、梯度下降示例
2018/03/05 Python
详解Python中如何写控制台进度条的整理
2018/03/07 Python
Pandas之Dropna滤除缺失数据的实现方法
2019/06/25 Python
python如何使用jt400.jar包代码实例
2019/12/20 Python
Django中modelform组件实例用法总结
2020/02/10 Python
全网首秀之Pycharm十大实用技巧(推荐)
2020/04/27 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
Django如何实现防止XSS攻击
2020/10/13 Python
文员个人的求职信范文
2013/09/26 职场文书
自动化专业毕业生自荐信
2013/11/01 职场文书
大学生个人自荐信
2014/02/24 职场文书
安全生产月演讲稿
2014/05/09 职场文书
工作证明格式及范本
2014/09/12 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
群众路线专项整治工作情况报告
2014/10/28 职场文书
2014财务年终工作总结
2014/12/08 职场文书
碧霞祠导游词
2015/02/09 职场文书
特岗教师个人总结
2015/02/10 职场文书
2015年科室工作总结
2015/04/10 职场文书
2019最新版试用期劳动合同模板!
2019/07/04 职场文书