vue proxyTable代理 解决开发环境的跨域问题
如果我们项目请求的地址为 htttp://xxxx.com/a/b/c
可以设置代理为:
dev:{
assetsSubDirectory: 'static',// 静态资源文件夹
assetsPublicPath: '/',// 发布路径
proxyTable: { // 代理配置表,在这里可以配置特定的请求代理到对应的API接口 // 例如将'localhost:8080/api/xxx'代理到'www.example.com/api/xxx' // 使用方法:https://vuejs-templates.github.io/webpack/proxy.html
'/a': {
target: htttp://xxxx.com/a',
// secure: false, // 如果是https接口,需要配置这个参数
changeOrigin: true,// 如果接口跨域,需要进行这个参数配置
pathRewrite: {
'^/a': ''
}
}
}
}
例如:接口地址原本是 /save/index,但是为了匹配代理地址,在前面加一个 /api, 因此接口地址需要写成这样的即可生效 /api/save/index。
注意: '/api' 为匹配项,target 为被请求的地址,因为在 请求的 url 中加了前缀 '/api',而原本的接口是没有这个前缀的,所以需要通过 pathRewrite 来重写地址,将前缀 '/api' 转为 '/'。如果本身的接口地址就有 '/api' 这种通用前缀,就可以把 pathRewrite 删掉。
项目中常见的:
项目中请求的地址应该为 axios.get('/a/b/c'),代理解析时会在a前面加上" htttp://xxxx.com"变成了" htttp://xxxx.com/a/b/c",
当项目打包上线时,代码里的请求地址不需要改动,因为当线上代码运行时,遇到 axios.get('/a/b/c') ,a前面有个‘/’代表根目录的意思。
所以‘/a/b/c’会被解析为 postname+port+'a/b/c',所以请求地址为 ‘htttp://xxxx.com/a/b/c’。
vue proxyTable代理 解决开发环境的跨域问题的更多相关文章
- Vue-cli proxyTable 解决开发环境的跨域问题
Vue-cli proxyTable 解决开发环境的跨域问题 proxyTable: { '/list': { target: 'http://api.xxxxxxxx.com', pathRewri ...
- 如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题
在开发环境与后端调试的时候难免会遇到跨域问题,很多人说跨域交给后端解决就好了. 其实不然,前端也有很多方法可以解决跨域,方便也快捷. 常见的有nginx转发.node代理. 在vue项目中常用的是pr ...
- Vue proxyTable 解决开发环境的跨域问题
在 config/index.js 配置文件中,添加 dev: { proxyTable: { '/ssp/withdraw': { target: 'http://dev.home.phiwifi. ...
- 转:Vue-cli proxyTable 解决开发环境的跨域问题
转:http://www.jianshu.com/p/95b2caf7e0da 和后端联调时总是会面对恼人的跨域问题,最近基于Vue开发项目时也遇到了这个问题,两边各自想了一堆办法,查了一堆资料,加了 ...
- Vue的学习总结之---Vue项目 前后端分离模式解决开发环境的跨域问题
原文:https://blog.csdn.net/localhost_1314/article/details/83623526 在前后端分离的web开发中,我们与后台联调时,会遇到跨域的问题. 比如 ...
- Vue-cli中的proxyTable解决开发环境的跨域问题
https://blog.csdn.net/u012149969/article/details/80288126 https://vuejs-templates.github.io/webpack/ ...
- nodejs 代理 解决开发环境跨域问题
前后端分离项目中,会遇到跨域问题.解决方法无非就是jsonp cors等. 本次项目前端不搭node服务,线上用nginx搭站点,nginx转发ajax请求server. 本地开发环境的跨域问题用no ...
- vue开发环境配置跨域,一步到位
本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问,前端跨域解决方案 production:产品 生产环境 development:开发 开发环境 1 ...
- 解决React前端在开发环境的跨域问题
在前后端分离的分布式架构中,跨域是一道无法绕过去的门槛,众所周知,生产环境上解决跨域最便捷的方式是使用Nginx来处理,那么,在本地开发环境又该如何处理呢? React框架里处理跨域问题,可以使用ht ...
随机推荐
- XCTF-web2
这种题目是比较简单地..直接写个小脚本就行了2333 <?php $a=" a1zLbgQsCESEIqRLwuQAyMwLyq2L5VwBxqGA3RQAyumZ0tmMvSGM2Z ...
- 我的Java秋招面经大合集
阿里面经 阿里中间件研发面经 蚂蚁金服研发面经 岗位是研发工程师,直接找蚂蚁金服的大佬进行内推. 我参与了阿里巴巴中间件部门的提前批面试,一共经历了四次面试,拿到了口头offer. 然后我也参加了 ...
- 机器学习回顾篇(7):决策树算法(ID3、C4.5)
.caret, .dropup > .btn > .caret { border-top-color: #000 !important; } .label { border: 1px so ...
- thinkphp5底层基类封装、内部类函数
记录下thinkphp5自定义底层基类.内部类函数使用笔记 大部分笔记来自tp手册. 底层常用代码的封装 在控制器中基类的起着至关重要的作用,整个项目的代码安全,复杂程度,易读性都要看你项目的基类架构 ...
- 收集的MSSQL注入笔记
①判断数据库类型 and exists (select * from sysobjects)--返回正常为mssql(也名sql server)and exists (select count(*) ...
- 维护基于ASP.NET的网站的学习-SqlCommand类介绍及存储过程
笔者目前在维护学校科技处的一个网站,目前学期初,教师申报项目操作多,出现了一些问题.前几天维护了一个验证码图片不显示的bug,今天想记录下这个解决了一整天的bug-老师项目结题需要手动修改数据库老师项 ...
- vue+element 实现商品sku效果
在网上搜索了很久,没有发现合适sku编辑的文章,只能自己写一个vue+element 的sku编辑功能.实现的效果如下图 除成本.售价.库存.货号这几个写死的属性外,可自行添加/删除商品属性,自行添加 ...
- 我家很管事的猫——mycat初步部署实践与问题排查
mycat,阿里出品的mysql中间件,提供读写分离和分库分表方案.项目中主要使用的是其读写分离功能. [如何部署?] 本文只采用并测试了双主从模式,配置看这一篇足矣: https://www.cnb ...
- 初识AutoIt
1.定义 AutoIt 目前最新是v3版本,这是一个使用类似BASIC脚本语言的免费软件,它设计用于Windows GUI(图形用户界面)中进行自动化操作.它利用模拟键盘按键,鼠标移动和窗口/控件的组 ...
- 我要学并发-Java内存模型到底是什么
内存模型 在计算机CPU,内存,IO三者之间速度差异,为了提高系统性能,对这三者速度进行平衡. CPU 增加了缓存,以均衡与内存的速度差异: 操作系统增加了进程.线程,以分时复用 CPU,进而均衡 C ...