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 相关文章推荐
Vue如何循环提取对象数组中的值
Nov 18 Vue.js
Vue使用Element实现增删改查+打包的步骤
Nov 25 Vue.js
Vue router传递参数并解决刷新页面参数丢失问题
Dec 02 Vue.js
VUE中鼠标滚轮使div左右滚动的方法详解
Dec 14 Vue.js
Vue 组件注册全解析
Dec 17 Vue.js
vue 通过base64实现图片下载功能
Dec 19 Vue.js
vue 使用rules对表单字段进行校验的步骤
Dec 25 Vue.js
Vue中inheritAttrs的使用实例详解
Dec 31 Vue.js
Vue实现动态查询规则生成组件
May 27 Vue.js
vue-cli4.5.x快速搭建项目
May 30 Vue.js
详解Vue router路由
Nov 20 Vue.js
深入讲解Vue中父子组件通信与事件触发
Mar 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
php中如何防止表单的重复提交
2013/08/02 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
php实现分页显示
2015/11/03 PHP
jquery蒙版控件实现代码
2010/12/08 Javascript
js常用代码段整理
2011/11/30 Javascript
javascript检测浏览器flash版本的实现代码
2011/12/06 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
JS前端开发判断是否是手机端并跳转操作(小结)
2017/02/05 Javascript
vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
2017/02/22 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
webpack4.x下babel的安装、配置及使用详解
2019/03/07 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
Python中模拟enum枚举类型的5种方法分享
2014/11/22 Python
python使用wmi模块获取windows下硬盘信息的方法
2015/05/15 Python
Python模拟鼠标点击实现方法(将通过实例自动化模拟在360浏览器中自动搜索python)
2017/08/23 Python
Python 关于反射和类的特殊成员方法
2017/09/14 Python
浅谈python 线程池threadpool之实现
2017/11/17 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
解决python3 网络请求路径包含中文的问题
2018/05/10 Python
深入解析python中的实例方法、类方法和静态方法
2019/03/11 Python
把JSON数据格式转换为Python的类对象方法详解(两种方法)
2019/06/04 Python
使用python制作一个为hex文件增加版本号的脚本实例
2019/06/12 Python
python 字典的打印实现
2019/09/26 Python
python分布式爬虫中消息队列知识点详解
2020/11/26 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
pytorch下的unsqueeze和squeeze的用法说明
2021/02/06 Python
护理专业本科生自荐信
2013/10/01 职场文书
学校安全生产承诺书
2014/05/23 职场文书
电子商务实训报告总结
2014/11/05 职场文书
2014年售后服务工作总结
2014/11/18 职场文书
《一面五星红旗》教学反思
2016/02/23 职场文书
Go 在 MongoDB 中常用查询与修改的操作
2021/05/07 Golang