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 相关文章推荐
jQuery学习笔记之jQuery的动画
Dec 22 Javascript
JS按位非(~)运算符与~~运算符的理解分析
Jul 31 Javascript
jQuery 淡入淡出 png图在ie8下有黑色边框的解决方法
Mar 05 Javascript
Javascript的时间戳和php的时间戳转换注意事项
Apr 12 Javascript
给事件响应函数传参数的四种方式小结
Dec 05 Javascript
jQuery数据缓存用法分析
Feb 20 Javascript
jQuery代码实现发展历程时间轴特效
Jul 30 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
Vue多选列表组件深入详解
Mar 02 Vue.js
在 HTML 页面中使用 React的场景分析
Jan 18 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
人尽可用的Windows技巧小贴士之下篇
2007/03/22 PHP
php数组函数序列之next() - 移动数组内部指针到下一个元素的位置,并返回该元素值
2011/10/31 PHP
PHP记录页面停留时间的方法
2016/03/30 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
JS按字节截取字符长度实例
2013/11/20 Javascript
使用jquery制作弹出框效果
2015/04/03 Javascript
JavaScript脚本判断蜘蛛来源的方法
2015/09/22 Javascript
angularJS 如何读写缓冲的方法(推荐)
2016/08/06 Javascript
bootstrap fileinput完整实例分享
2016/11/08 Javascript
angular forEach方法遍历源码解读
2017/01/25 Javascript
微信扫码支付零云插件版实例详解
2017/04/26 Javascript
React-router v4 路由配置方法小结
2017/08/08 Javascript
极简主义法编写JavaScript类
2017/11/02 Javascript
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
layui实现数据分页功能
2019/07/27 Javascript
Javascript新手入门之字符串拼接与变量的应用
2020/12/03 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
黑科技 Python脚本帮你找出微信上删除你好友的人
2016/01/07 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
详解Django-auth-ldap 配置方法
2018/12/10 Python
python3 线性回归验证方法
2019/07/09 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
TensorFlow2.X结合OpenCV 实现手势识别功能
2020/04/08 Python
JavaScript获取当前url根目录(路径)
2014/02/19 面试题
mysql有关权限的表都有哪几个
2015/04/22 面试题
大学生实习感言
2014/01/16 职场文书
员工拓展培训方案
2014/02/15 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
篝火晚会主持词
2014/03/25 职场文书
班主任评语大全
2014/04/26 职场文书
感恩的演讲稿
2014/05/06 职场文书
民政局办理协议离婚(范本)
2014/10/25 职场文书
2014年财务工作总结与计划
2014/12/08 职场文书
大学毕业生个人总结
2015/02/28 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang
python控制台打印log输出重复的解决方法
2021/05/14 Python