Vue项目前后端联调(使用proxyTable实现跨域方式)


Posted in Javascript onJuly 18, 2020

vue本地项目调试线上接口出现跨域问题

使用方法:vue在配置文件中提供了proxyTable来设置跨域,在config文件夹的index.js文件中

dev: { //开发环境下

  // 静态资源文件夹
  assetsSubDirectory: 'static',

  // 发布路径
  assetsPublicPath: '/',

  // 代理配置表,在这里可以配置特定的请求代理到对应的API接口
  // 例如将'localhost:8080/api/xxx'代理到'http://xxxxxxx.com/xxx'
  proxyTable: {
   '/api': {
    target: 'http://xxxxxx.com', // 接口的域名
    // secure: false, // 如果是https接口,需要配置这个参数
    changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
    pathRewrite: {
     '^/api': '', // 这种接口配置出来 http://xxxxxx.com:8080/xxx
    }
   }
  }
}

关于pathRewrite中'^/api'的作用:

用代理, 首先你得有一个标识, 告诉他你这个连接要用代理. 不然的话, 可能你的 html, css, js这些静态资源都跑去代理. 所以我们只要接口用代理, 静态文件用本地。

'/api': {}, 就是告诉node, 我接口只要是'/api'开头的才用代理.所以你的接口就要这么写 /api/xx/xx. 最后代理的路径就是 http://xxxxxx.com/api/xx/xx.

可是不对啊, 我正确的接口路径里面没有/api啊. 所以就需要 pathRewrite,用''^/api'':'', 把'/api'去掉, 这样既能有正确标识, 又能在请求接口的时候去掉api

补充知识:vue2./vue.3.x实现跨域(proxytable/proxy)

vue2.x

config/index.js

proxyTable: {
   '/api': {
    target: 'http://localhost:3000/', // 请求的接口的域名
    // secure: false, // 如果是https接口,需要配置这个参数
    changeOrigin: true, // 如果接口跨域,需要进行这个参数配置
    pathRewrite: {
     '^/api': ''
    }
   }
  },

vue3.x

vue.config.js

module.exports = {
  devServer: {
   proxy: {
    '/api': {
     target: 'http://localhost:8080/',
     changeOrigin: true,
     ws: true,
     pathRewrite: {
      '^/api': '/static/mock'
     }
    }
   }
  }
 }

以上这篇Vue项目前后端联调(使用proxyTable实现跨域方式)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
jQuery ajax BUG:object doesn't support this property or method
Jul 06 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
Sep 06 Javascript
Extjs改变树节点的勾选状态点击按钮将复选框去掉
Nov 14 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
javascript使用avalon绑定实现checkbox全选
May 06 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
AngularJS实现的回到顶部指令功能实例
May 17 Javascript
easyui datagrid 表格中操作栏 按钮图标不显示的解决方法
Jul 27 Javascript
seajs实现强制刷新本地缓存的方法分析
Oct 16 Javascript
ES6关于Promise的用法详解
May 07 Javascript
vue input输入框关键字筛选检索列表数据展示
Oct 26 Javascript
完美解决通过IP地址访问VUE项目的问题
Jul 18 #Javascript
Vue移动端项目实现使用手机预览调试操作
Jul 18 #Javascript
vue中移动端调取本地的复制的文本方式
Jul 18 #Javascript
vue中用 async/await 来处理异步操作
Jul 18 #Javascript
vue 使用async写数字动态加载效果案例
Jul 18 #Javascript
vue-router为激活的路由设置样式操作
Jul 18 #Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 #Javascript
You might like
PHP 和 MySQL 基础教程(三)
2006/10/09 PHP
使用网络地址转换实现多服务器负载均衡
2006/10/09 PHP
APMServ使用说明
2006/10/23 PHP
php 验证码制作(网树注释思想)
2009/07/20 PHP
深入解析PHP 5.3.x 的strtotime() 时区设定 警告信息修复
2013/08/05 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
Thinkphp5行为使用方法汇总
2017/12/21 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
解决laravel5.4下的group by报错的问题
2019/10/16 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
javascript检查日期格式的函数[比较全]
2008/10/17 Javascript
setTimeout函数兼容各主流浏览器运行执行效果实例
2013/06/13 Javascript
js获取指定的cookie的具体实现
2014/02/20 Javascript
javascript实现table选中的行以指定颜色高亮显示的方法
2015/05/13 Javascript
JavaScript操作XML/HTML比较常用的对象属性集锦
2015/10/30 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
js实现左右两侧浮动广告
2018/07/09 Javascript
vue实现购物车列表
2020/06/30 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
2020/08/07 Javascript
[01:35]2018完美盛典章节片——共竞
2018/12/17 DOTA
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
Python日期时间Time模块实例详解
2019/04/15 Python
11个Python3字典内置方法大全与示例汇总
2019/05/13 Python
一文弄懂Pytorch的DataLoader, DataSet, Sampler之间的关系
2020/07/03 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
Ray-Ban雷朋太阳眼镜英国官网:Ray-Ban UK
2019/11/23 全球购物
入股合作协议书
2014/10/12 职场文书
2014年实习班主任工作总结
2014/11/08 职场文书
结婚堵门保证书
2015/05/08 职场文书
2016应届毕业生实习心得体会
2015/10/09 职场文书
2019年入党思想汇报格式与要求
2019/06/25 职场文书
Python使用pandas导入xlsx格式的excel文件内容操作代码
2022/12/24 Python