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 相关文章推荐
基于node.js的快速开发透明代理
Dec 25 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
js简单的弹出框有关闭按钮
May 05 Javascript
javascript每日必学之运算符
Feb 16 Javascript
完善的jquery处理机制
Feb 21 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
bootstrap输入框组使用方法
Feb 07 Javascript
jQuery替换节点元素的操作方法
Mar 18 jQuery
微信小程序配置服务器提示验证token失败的解决方法
Apr 03 Javascript
解决layui下拉框监听问题(监听不到值的变化)
Sep 28 Javascript
KnockoutJS数组比较算法实例详解
Nov 25 Javascript
vue使用better-scroll实现滑动以及左右联动
Jun 30 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
多重?l件?合查?(二)
2006/10/09 PHP
基于php权限分配的实现代码
2013/04/28 PHP
php检测文本的编码
2015/07/26 PHP
详解laravel passport OAuth2.0的4种模式
2019/11/04 PHP
php使用gearman进行任务分发操作实例详解
2020/02/26 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
细说浏览器特性检测(2)-通用事件检测
2010/11/05 Javascript
Javascript 面向对象(三)接口代码
2012/05/23 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
解决jquery1.9不支持browser对象的问题
2013/11/13 Javascript
解析JavaScript中的不可见数据类型
2013/12/02 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
第五篇Bootstrap 排版
2016/06/21 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
Vue实现购物车功能
2017/04/27 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
使用classList来实现两个按钮样式的切换方法
2018/01/24 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
2018/09/07 Javascript
js禁止查看源文件屏蔽Ctrl+u/s、F12、右键等兼容IE火狐chrome
2020/10/01 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
Python转码问题的解决方法
2008/10/07 Python
Python中处理unchecked未捕获异常实例
2015/01/17 Python
Django 导出 Excel 代码的实例详解
2017/08/11 Python
如何实现删除numpy.array中的行或列
2018/05/08 Python
对Pytorch中nn.ModuleList 和 nn.Sequential详解
2019/08/18 Python
python3实现单目标粒子群算法
2019/11/14 Python
python实现学生成绩测评系统
2020/06/22 Python
Python request post上传文件常见要点
2020/11/20 Python
Peter Millar官网:美国高档生活服饰品牌
2018/07/02 全球购物
自然健康的概念:Natural Healthy Concepts
2020/01/26 全球购物
优秀求职信范文分享
2014/01/26 职场文书
搞笑获奖感言
2014/01/30 职场文书
医院检讨书范文
2014/02/01 职场文书
银行求职信模板
2015/03/20 职场文书
浅谈MySQL之浅入深出页原理
2021/06/23 MySQL