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 ...
随机推荐
- SpringBootSecurity学习(23)前后端分离版之OAuth2.0 其它模式
密码模式 前面介绍了授权码模式和刷新令牌两种获取最新令牌的方法,下面来看一下其它模式.首先看密码模式,我们默认配置的三种模式中其实就包含密码模式的支持: 因此我们启动项目,直接使用密码模式即可,访问地 ...
- 你的火狐很慢吗? - Firefox启动和运行速度优化
最近刚开始体验firefox,发现了一些优势和缺点,无敌的扩展确实带来的是功能上的享受,可随之而来的问题便是太多的插件和主题导致ff启动如龟速,比起IE和TW都有不小的差距,因此特意搜集来一些关于启动 ...
- git操作指令,以及常规git代码操作
安装git后操作指令如下:可以查阅git安装使用操作指南详情git安装使用操作图示详情.note 线上可参考指南:http://www.bootcss.com/p/git-guide/ 所有操作在 ...
- 马蜂窝 IM 移动端架构的从 0 到 1
(马蜂窝技术原创内容,公众号 ID:mfwtech) 移动互联网技术改变了旅游的世界,这个领域过去沉重的信息分销成本被大大降低.用户与服务供应商之间.用户与用户之间的沟通路径逐渐打通,沟通的场景也在不 ...
- Ubuntu Qt5.13 无法输入中文和中文显示乱码问题
无法输入中文: sudo apt-get install libfcitx-qt5-dev cd /usr/lib/x86_64-linux-gnu/qt5/plugins/platforminput ...
- CTFd平台部署
学校要办ctf了,自己一个人给学校搭建踩了好多坑啊..这里记录一下吧 心累心累 这里只记录尝试成功的过程 有些尝试失败的就没贴上来 为各位搭建的时候节省一部分时间吧. ubuntu18搭建 0x01 ...
- 控制反转和依赖注入(对IOC,DI理解+案例)
理解 控制反转说的官方一点就是面向对象编程中的一种设计原则,可以用来减低计算机代码之间的耦合度.其实就是一种设计思想,大概思想就是把设计好的对象交给容器控制,而不是在你内部直接控制. 依赖注入是控制反 ...
- 【Spring Cloud】实战项目搭建
0.项目搭建 创建maven项目,删除其中的src目录,作为整体父项目,在其中添加module实现各个组件. 1.Eureka Server的实现 添加module,创建Spring Boot项目,添 ...
- ajax 轮询(适合web端二维码请求)
(前几天 一直弄二维码轮询登录 想了半天 总算弄出来了 分享给大家 ^-^) 轮询: 所谓轮询 肯定需要 setInterval 但是怎么加ajax请求 需要有点小问题而且轮询成功后需要停 ...
- robotframework+ride+python3环境搭建
一.windows下安装python3.6 1.官网下载安装包https://www.python.org/downloads/windows/ 2.进行安装,接下来步骤一直next即可 二.cmd下 ...