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 相关文章推荐
javascript+mapbar实现地图定位
Apr 09 Javascript
js网页中的(运行代码)功能实现思路
Feb 04 Javascript
JavaScript打印网页指定区域的例子
May 03 Javascript
理解javascript中的Function.prototype.bind的方法
Feb 03 Javascript
jquery实现全选、全不选以及单选功能
Mar 23 jQuery
HTML5+JS+JQuery+ECharts实现异步加载问题
Dec 16 jQuery
解决vue js IOS H5focus无法自动弹出键盘的问题
Aug 30 Javascript
JavaScript实现连连看连线算法
Jan 05 Javascript
Vuex mutitons和actions初使用详解
Mar 04 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 Javascript
vue 获取url参数、get参数返回数组的操作
Nov 12 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 面向对象程序设计(oop)学习笔记 (四) - 异常处理类Exception
2014/06/12 PHP
php链表用法实例分析
2015/07/09 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
thinkphp5引入公共部分header、footer的方法详解
2018/09/14 PHP
jQuery实现点击文本框弹出热门标签的提示效果
2013/11/17 Javascript
利用javascript判断文件是否存在
2013/12/31 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
利用JS实现数字增长
2016/07/28 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
JQuery实现列表中复选框全选反选功能封装(推荐)
2016/11/24 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
十大 Node.js 的 Web 框架(快速提升工作效率)
2017/06/30 Javascript
使用mint-ui开发项目的一些心得(分享)
2017/09/07 Javascript
python计算程序开始到程序结束的运行时间和程序运行的CPU时间
2013/11/28 Python
python每隔N秒运行指定函数的方法
2015/03/16 Python
详解Python里使用正则表达式的ASCII模式
2017/11/02 Python
python编写暴力破解zip文档程序的实例讲解
2018/04/24 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
浅谈Pandas Series 和 Numpy array中的相同点
2019/06/28 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
Python3.x+pyqtgraph实现数据可视化教程
2020/03/14 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
日本食品网上商店:JaponShop.com
2017/11/28 全球购物
Bluebella法国官网:英国性感内衣品牌
2019/05/03 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
远程调用的原理
2014/07/05 面试题
店长岗位职责
2013/11/21 职场文书
社团成立邀请函
2014/01/08 职场文书
优秀本科生求职推荐信
2014/02/24 职场文书
环保建议书400字
2014/05/14 职场文书
关工委先进个人事迹材料
2014/05/23 职场文书
幼儿园老师个人总结
2015/02/28 职场文书
见习期个人总结
2015/03/05 职场文书
童年读书笔记
2015/06/26 职场文书
2016年教师师德师风心得体会
2016/01/12 职场文书