vue项目proxyTable配置和部署服务器


Posted in Vue.js onApril 14, 2022

proxyTable配置和部署服务器

在本地创建node.js服务器,前端访问本地接口需要设置跨域

1.在config中的index

找到proxyTable,完成以下设置

proxyTable: {
‘/api': {
target: ‘http://localhost:8808/', //目标接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
‘^/api': ‘/' //重写接口
}
}
},

vue项目proxyTable配置和部署服务器

2.在调取接口的方法中

vue项目proxyTable配置和部署服务器

下面是node.js服务端的

vue项目proxyTable配置和部署服务器

切记:::!!!配置完成后一定要重启前端项目,要不然会报错

proxyTable代理参数含义

vue项目里,找到index.js文件,再proxyTable 写入相应的代理即可,网上有些说自己新建一个vue.config.js文件,项目启动时会自己导入,也是可以的

proxyTable: {
      // 这里配置 '/api' 就等价于 target , 你在链接里访问 /api === http://localhost:54321
      '/api': {//该api可以自定义,比如写成abc,但同时下方的/^api也要改成/^abc了
        target: 'http://localhost:54321/', // 服务器的接口地址,即你要访问的真实地址,http或者https都可以 //        http://localhost:54321/json.data.json,
        changeOrigin: true, // 是否是跨域请求?肯定是啊,不跨域就没有必要配置这个proxyTable了.
          logLevel: 'debug',//调试时,可以输出代理后的真实地址是什么,上线时注释掉即可
        pathRewirte: {
          // 这里是追加链接,比如真是接口里包含了 /api,就需要这样配置.以下两种方式任写一种即可
 
            //方式一,留空,不写
             '/^api': '', //代表你在axios里的请求'/api/info' = http://localhost:54321/info
 
            //方式二,重写
            '/^api': 'api/', //代表你在axios里的请求'/api/info' = http://localhost:54321/api/info
 
                 
        }
      }
     },
Vue.js 相关文章推荐
如何正确解决VuePress本地访问出现资源报错404的问题
Dec 03 Vue.js
浅析vue中的nextTick
Dec 28 Vue.js
Vuex实现简单购物车
Jan 10 Vue.js
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
Vue实现圆环进度条的示例
Feb 06 Vue.js
vue登录页实现使用cookie记住7天密码功能的方法
Feb 18 Vue.js
如何用vue实现网页截图你知道吗
Nov 17 Vue.js
Vue中Object.assign清空数据报错的解决方案
Mar 03 Vue.js
Vue中使用import进行路由懒加载的原理分析
Apr 01 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
vue @click.native 绑定原生点击事件
Apr 22 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 #Vue.js
vue elementUI表格控制对应列
Apr 13 #Vue.js
vue项目打包后路由错误的解决方法
Apr 13 #Vue.js
vue的项目如何打包上线
vue2的 router在使用过程中遇到的一些问题
Apr 13 #Vue.js
vue+elementUI实现表格列的显示与隐藏
Apr 13 #Vue.js
如何优化vue打包文件过大
Apr 13 #Vue.js
You might like
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
第十三节--对象串行化
2006/11/16 PHP
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
php smarty函数扩展
2010/03/15 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
php rsa加密解密使用详解
2015/01/14 PHP
PHP 对象接口简单实现方法示例
2020/04/13 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
JQuery之拖拽插件实现代码
2011/04/14 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
火狐textarea输入法的bug的触发及解决
2013/07/24 Javascript
我的Node.js学习之路(二)NPM模块管理
2014/07/06 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
jQuery实现模仿微博下拉滚动条加载数据效果
2015/12/25 Javascript
javascript中获取class的简单实现
2016/07/12 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
基于Koa(nodejs框架)对json文件进行增删改查的示例代码
2019/02/02 NodeJs
ant design pro中可控的筛选和排序实例
2020/11/17 Javascript
[01:13:18]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.23
2019/09/05 DOTA
Python高级应用实例对比:高效计算大文件中的最长行的长度
2014/06/08 Python
Django与遗留的数据库整合的方法指南
2015/07/24 Python
总结python爬虫抓站的实用技巧
2016/08/09 Python
Python搭建Spark分布式集群环境
2019/07/05 Python
Python 类属性与实例属性,类对象与实例对象用法分析
2019/09/20 Python
Django和Flask框架优缺点对比
2019/10/24 Python
详细分析Python可变对象和不可变对象
2020/07/09 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题
2021/02/22 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
俄罗斯金苹果网上化妆品和香水商店:Goldapple
2019/12/01 全球购物
详解如何解决使用JSON.stringify时遇到的循环引用问题
2021/03/23 Javascript
《假如》教学反思
2014/04/17 职场文书
2014年导购员工作总结
2014/11/18 职场文书
深入理解pytorch库的dockerfile
2022/06/10 Python