【VUE】一个简单常用的proxyTable配置

// 配置改动后需要重启生效 （运行npm run dev）
proxyTable: {// 所有 /api请求的路由会走这个代理'/api': {changeOrigin: true, //跨域target: 'http://172.16.0.107:1338'},// 所有 /ywapi请求的路由会走这个代理'/ywapi': {changeOrigin: true,target: 'http://127.0.0.1:7001',//重写路径pathRewrite: {'^/ywapi': '/abc/xxx' //例如 /api/getuser或被重写为 /ywapi/getuser},onProxyReq: function (proxyReq, req, res) {//实在不知道代理后的路径，可以在这里打印出出来看看console.log("原路径：" + req.originalUrl, "代理路径：" + req.path)}}
},

设置地址方式如下：

位置：config->index.js中

proxyTable: {'/api': {target: 'http://127.0.0.1:3000',changeOrigin: true,pathRewrite: {'^/api': '/'}}},

这里的/api被映射为http://127.0.0.1:3000

Vue中的请求：

mounted: function () {this.$http.get('/api/save/index', {}, {},{}).then(function (response) {// 这里是处理正确的回调console.log(response)// this.articles = response.data["subjects"] 也可以}, function (response) {// 这里是处理错误的回调console.log(response)});}

可以看到我们的URL地址

会被映射为：http://127.0.0.1:3000/save/index

    '^/api': '/api'    这种接口配置出来     http://xxx:8080/api/save/index// 2  ^/api': '/' 这种接口配置出来     http://xxx:8080/save/index

即可解决跨域
接口地址原本是 /save/index，但是为了匹配代理地址，在前面加一个 /api, 因此接口地址需要写成这样的即可生效 /api/save/index。

注意： ‘/api’ 为匹配项，target 为被请求的地址，因为在 ajax 的 url 中加了前缀 ‘/api’，而原本的接口是没有这个前缀的，所以需要通过 pathRewrite 来重写地址，将前缀 ‘/api’ 转为 ‘/’。如果本身的接口地址就有 ‘/api’ 这种通用前缀，就可以把 pathRewrite 删掉。

【VUE】一个简单常用的proxyTable配置相关推荐

python交叉编译的配置脚本怎么写_如何写一个简单的脚本并配置
什么是脚本: 脚本就是一个给计算机照着做的东西 cd ~/desktop 回到桌面 mkdir demo 创建一个demo的文件夹 cd demo 进入demo 这一系列命令的组合就是脚本,当我们运行 ...
工作随记1：搭建一个简单局域网，并配置远程管理
需求: 搭建如图所示的网络,要求主楼与辅楼能够相互通信,且核心交换机与辅楼主交换配置管理vlan并开启telnet,使通信办电脑可以远程维护. 工具: 华为模拟器ensp 规划: 1.主楼通信办划入v ...
【一个简单的vue公式编辑器组件】
vue 一个简单的公式编辑器组件示例一个基于vue实现数据统计公式的基本功能. 新建一个 formula.vue 组件, 使用 <formula ref="formulaPage& ...
vue 图片剪辑_一个简单的Vue图片剪辑插件
vue 图片剪辑 Vue-Crpopper (vue-crpopper) A simple picture clipping plugin for vue. 一个简单的Vue图片剪辑插件. 安装 (i ...
教大家一个简单的办法
教大家一个简单的办法,如何从4000只股票当中,轻松找出最赚钱的公司. 什么是好股票?能够上涨的股票就是好股票.什么是好公司?能够持续赚钱的公司就是好公司.股价能够上涨的公司不一定是好公司,但是好 ...
安装GNS3以及实现一个简单的网络拓扑图
双击(GNS3.exe)安装包按顺序安装就可以到下面的一个界面: 安装完成后路由器选项卡是灰色的(不可用),可以通过挂载的方式添加对应的路由器,因此必须挂载相应镜像,下面是相应的步骤: 找到文件中相应 ...
用 cooking 搭建一个简单又优雅的 Vue 项目开发环境 (入门篇)
本文适合 Vue 的初学者,以及对 webpack 不熟悉的同学阅读.前提是你要会用基本的命令行. Node 和 NPM,以及掌握 ES2015 的基础知识.本文都是在 macOS 环境下运行,要求使 ...
ant vue 树形菜单横向显示_快速实现一个简单可复用可扩展的Vue树组件
来源 | https://wintc.top/article/13大概因为平时工作项目的原因,写了很多次树形组件,越写越觉得可以写得更简单并且更具有复用性.扩展性.树组件的应用场景很多,比如一篇文章的 ...
java计算机毕业设计vue开发一个简单音乐播放器（附源码、数据库）
java计算机毕业设计vue开发一个简单音乐播放器(附源码.数据库) 项目运行环境配置: Jdk1.8 + Tomcat8.5 + Mysql + HBuilderX(Webstorm也行)+ Ec ...

【VUE】一个简单常用的proxyTable配置

【VUE】一个简单常用的proxyTable配置相关推荐

最新文章

热门文章