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测试题练习代码
Oct 10 Javascript
js调试工具Console命令详解
Oct 21 Javascript
Javascript验证方法大全
Sep 21 Javascript
轻松学习jQuery插件EasyUI EasyUI创建树形网络(1)
Nov 30 Javascript
封装属于自己的JS组件
Jan 27 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
Angular.JS中的指令引用template与指令当做属性详解
Mar 30 Javascript
js实现随机数字字母验证码
Jun 19 Javascript
详解vue模拟加载更多功能(数据追加)
Jun 23 Javascript
js表单序列化判断空值的实例
Sep 22 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 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设计模式之调解者模式的深入解析
2013/06/13 PHP
单点登录 Ucenter示例分析
2013/10/29 PHP
简单介绍win7下搭建apache+php+mysql开发环境
2015/08/06 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
PHP实现图片的等比缩放和Logo水印功能示例
2017/05/04 PHP
Laravel框架自定义验证过程实例分析
2019/02/01 PHP
JavaScript插入动态样式实现代码
2012/02/22 Javascript
JQ技术实现注册页面带有校验密码强度
2015/07/27 Javascript
jQuery网页选项卡插件rTabs用法实例分析
2015/08/26 Javascript
jQuery实现简单的图片查看器
2020/09/11 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
微信小程序制作扭蛋机代码实例
2019/09/24 Javascript
js blob类型url的视频下载问题的解决
2019/11/29 Javascript
python sqlobject(mysql)中文乱码解决方法
2008/11/14 Python
用Python解决计数原理问题的方法
2016/08/04 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
[原创]教女朋友学Python(一)运行环境搭建
2017/11/29 Python
让Python更加充分的使用Sqlite3
2017/12/11 Python
python使用循环打印所有三位数水仙花数的实例
2018/11/13 Python
python实现电子书翻页小程序
2019/07/23 Python
python 类的继承 实例方法.静态方法.类方法的代码解析
2019/08/23 Python
Python实现动态给类和对象添加属性和方法操作示例
2020/02/29 Python
Python如何进行时间处理
2020/08/06 Python
python+requests接口自动化框架的实现
2020/08/31 Python
python利用paramiko实现交换机巡检的示例
2020/09/22 Python
HTML5 File接口在web页面上使用文件下载
2017/02/27 HTML / CSS
受欢迎的大学生自我评价
2013/12/05 职场文书
品牌推广策划方案
2014/05/28 职场文书
体育专业求职信
2014/07/16 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
解除租房协议书
2014/12/03 职场文书
中学生社区服务活动报告
2015/02/05 职场文书
2015年幼儿园班主任工作总结
2015/05/12 职场文书
2015秋季新学期开学寄语
2015/05/28 职场文书
Pyhton模块和包相关知识总结
2021/05/12 Python
DIV CSS实现网页背景半透明效果
2021/12/06 HTML / CSS