Vue3项目打包后部署到服务器 请求不到后台接口解决方法


Posted in Javascript onFebruary 06, 2020

本地开发没问题能正常请求到接口,部署后页面也能展示出来就是接口的数据请求不到

network一看是这么个情况

Vue3项目打包后部署到服务器 请求不到后台接口解决方法

对比了本地的页面

Vue3项目打包后部署到服务器 请求不到后台接口解决方法

可以发现是remote address出了问题。

经过查询得知:Remote Address代表的是当前HTTP请求的远程地址,即HTTP请求的源地址。

我的猜想是proxy代理在本地环境下用的是localhost即127.0.0.1进行转发代理的,而部署到服务器后相当于换了个环境( ip地址和端口已经改变 ),此时proxy代理就出错了。

解决方法:

地址错误了,那就换到正确的地址。

即:本地开发环境 代理时用127.0.0.1,生产环境用服务器的ip

在Vue中要实现这个效果就需要用到全局环境变量了

Vue3项目打包后部署到服务器 请求不到后台接口解决方法

 

然后proxy代理和axios请求那也要改一下Vue3项目打包后部署到服务器 请求不到后台接口解决方法

 Vue3项目打包后部署到服务器 请求不到后台接口解决方法

至此问题解决

如果大家在学习中有任何补充,可以联系三水点靠木小编,感谢大家的学习。

Javascript 相关文章推荐
json-lib出现There is a cycle in the hierarchy解决办法
Feb 24 Javascript
Node.js文件操作详解
Aug 16 Javascript
jQuery中html()方法用法实例
Dec 25 Javascript
使用AngularJS来实现HTML页面嵌套的方法
Jun 17 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
Nov 03 Javascript
select获取下拉框的值 下拉框默认选中方法
Feb 28 Javascript
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
Javascript实现购物车功能的详细代码
May 08 Javascript
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 Javascript
JavaScript offset实现鼠标坐标获取和窗口内模块拖动
May 30 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 #Javascript
node.js开发辅助工具nodemon安装与配置详解
Feb 06 #Javascript
Vue表单控件数据绑定方法详解
Feb 05 #Javascript
Vue过渡效果之CSS过渡详解(结合transition,animation,animate.css)
Feb 05 #Javascript
vue 翻页组件vue-flip-page效果
Feb 05 #Javascript
在博客园博文中添加自定义右键菜单的方法详解
Feb 05 #Javascript
Vue中多元素过渡特效的解决方案
Feb 05 #Javascript
You might like
PHP Session变量不能传送到下一页的解决方法
2009/11/27 PHP
给初学者的30条PHP最佳实践(荒野无灯)
2011/08/02 PHP
Yii2搭建后台并实现rbac权限控制完整实例教程
2016/04/28 PHP
php加密之discuz内容经典加密方式实例详解
2017/02/04 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
JavaScript 学习笔记之操作符
2015/01/14 Javascript
js实现浏览本地文件并显示扩展名的方法
2015/08/17 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
JS实现图片垂直居中显示小结
2016/12/13 Javascript
微信小程序开发图片拖拽实例详解
2017/05/05 Javascript
bootstrap选项卡扩展功能详解
2017/06/14 Javascript
Angular中响应式表单的三种更新值方法详析
2017/08/22 Javascript
Vue.js组件通信的几种姿势
2017/10/23 Javascript
Angular 5.x 学习笔记之Router(路由)应用
2018/04/08 Javascript
详解vscode中vue代码颜色插件
2018/10/11 Javascript
如何制作一个Node命令行图像识别工具
2018/12/12 Javascript
微信小程序实现pdf、word等格式文件上传的方法
2019/09/10 Javascript
使用layui定义一个模块并使用的例子
2019/09/14 Javascript
layui问题之模拟table表格中的选中按钮选中事件的方法
2019/09/20 Javascript
Python中的高级数据结构详解
2015/03/27 Python
解决Python传递中文参数的问题
2015/08/04 Python
Python中查看文件名和文件路径
2017/03/31 Python
有趣的python小程序分享
2017/12/05 Python
python获取当前文件路径以及父文件路径的方法
2019/07/10 Python
python输出数学符号实例
2020/05/11 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
html5使用canvas画三角形
2014/12/15 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
canvas绘制视频封面的方法
2018/02/05 HTML / CSS
Anthropologie英国:美国家喻户晓的休闲服装和家居产品品牌
2018/12/05 全球购物
中国专业的音频分享平台:喜马拉雅
2019/05/24 全球购物
应急处置方案
2014/06/16 职场文书
小学生读书活动总结
2014/06/30 职场文书
创业计划书之干洗店
2019/09/10 职场文书