博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
proxyTable配置接口代理
阅读量:5880 次
发布时间:2019-06-19

本文共 1160 字,大约阅读时间需要 3 分钟。

hot3.png

webpack+vue-cil 中proxyTable配置接口地址代理

    在项目开发的时候,接口联调的时候一般都是同域名下,且不存在跨域的情况下进行接口联调,但是当我们现在使用vue-cli进行项目打包的时候,我们在本地启动服务器后,比如本地开发服务下是 http://localhost:8080 这样的访问页面,但是我们的接口地址是 http://xxxx.com/save/index 这样的接口地址,我们这样直接使用会存在跨域的请求,导致接口请求不成功,因此我们需要在打包的时候配置一下,我们进入 config/index.js 代码下如下配置即可:

复制代码

dev: {    // 静态资源文件夹    assetsSubDirectory: 'static',    // 发布路径    assetsPublicPath: '/',    // 代理配置表,在这里可以配置特定的请求代理到对应的API接口    // 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx'    // 使用方法:https://vuejs-templates.github.io/webpack/proxy.html    proxyTable: {      '/api': {        target: 'http://xxxxxx.com', // 接口的域名        // secure: false,  // 如果是https接口,需要配置这个参数        changeOrigin: true, // 如果接口跨域,需要进行这个参数配置        pathRewrite: {          '^/api': ''        }      }    },    // 本地访问 http://localhost:8080    host: 'localhost', // can be overwritten by process.env.HOST

复制代码

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

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

转载于:https://my.oschina.net/kitty0107/blog/2253186

你可能感兴趣的文章
python基础教程_学习笔记19:标准库:一些最爱——集合、堆和双端队列
查看>>
C# 解决窗体闪烁
查看>>
CSS魔法堂:Transition就这么好玩
查看>>
【OpenStack】network相关知识学习
查看>>
centos 7下独立的python 2.7环境安装
查看>>
[日常] 算法-单链表的创建
查看>>
前端工程化系列[01]-Bower包管理工具的使用
查看>>
使用 maven 自动将源码打包并发布
查看>>
Spark:求出分组内的TopN
查看>>
Python爬取豆瓣《复仇者联盟3》评论并生成乖萌的格鲁特
查看>>
关于跨DB增量(增、改)同步两张表的数据小技巧
查看>>
学员会诊之03:你那惨不忍睹的三层架构
查看>>
vue-04-组件
查看>>
Golang协程与通道整理
查看>>
解决win7远程桌面连接时发生身份验证错误的方法
查看>>
C/C++ 多线程机制
查看>>
js - object.assign 以及浅、深拷贝
查看>>
python mysql Connect Pool mysql连接池 (201
查看>>
Boost在vs2010下的配置
查看>>
一起谈.NET技术,ASP.NET伪静态的实现及伪静态的意义
查看>>