Vue-cli proxyTable 解决开发环境的跨域问题

和后端联调时总是会面对恼人的跨域问题，最近基于Vue开发项目时也遇到了这个问题，两边各自想了一堆办法，查了一堆资料，加了一堆参数，最后还得我把自己的localhost映射成上线时将要使用的域名。
今天翻看代码时，突然发现vue-cli的config文件里有一个参数叫proxyTable，看这个名字就感觉能解决问题，于是我就去搜了一下，果然。在vuejs-templates，也就是vue-cli的使用的模板插件里，有关于API proxy的说明，使用的就是这个参数。
https://vuejs-templates.github.io/webpack/proxy.html
这个参数主要是一个地址映射表，你可以通过设置将复杂的url简化，例如我们要请求的地址是api.xxxxxxxx.com/list/1，可以按照如下设置：

proxyTable: {'/list': {target: 'http://api.xxxxxxxx.com',pathRewrite: {'^/list': '/list' } } }

这样我们在写url的时候，只用写成/list/1就可以代表api.xxxxxxxx.com/list/1.
那么又是如何解决跨域问题的呢？其实在上面的'list'的参数里有一个changeOrigin参数，接收一个布尔值，如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域问题了，当然这只适用于开发环境。增加的代码如下所示：

proxyTable: {'/list': {target: 'http://api.xxxxxxxx.com',changeOrigin: true,pathRewrite: {'^/list': '/list' } } }

转载于:https://www.cnblogs.com/ourLifes/p/7598097.html

Vue-cli proxyTable 解决开发环境的跨域问题相关推荐

如何实现vue前端跨域，proxyTable解决开发环境前端跨域问题
如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题参考文章: (1)如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题 (2)https://www.cnblog ...
Vue-cli proxyTable 解决开发环境的跨域问题(转)
Vue-cli proxyTable 解决开发环境的跨域问题(转) 参考文章: (1)Vue-cli proxyTable 解决开发环境的跨域问题(转) (2)https://www.cnblogs. ...
vue-cil解决开发环境的跨域问题
为什么会产生跨域问题由于浏览器同源策略的限制,当前端项目运行的服务地址和接口服务运行的地址协议域名端口三者有一个不一致就会出现跨域解决开发环境的跨域问题 ue-cli为我们在本地开启了 ...
Vue---vue-cli 中的proxyTable解决开发环境中的跨域问题
Vue---vue-cli 中的proxyTable解决开发环境中的跨域问题参考文章: (1)Vue---vue-cli 中的proxyTable解决开发环境中的跨域问题 (2)https://ww ...
vue如何配置服务器端跨域_vue开发环境配置跨域，一步到位
本文要实现的是:使用vue-cli搭建的项目在开发时配置跨域,上线后不做任何任何修改,接口也可以访问阅读时间需要三分钟 production:产品生产环境 development:开发开发环境 ...
vue-cli2.x统一配置接口请求地址和开发环境的跨域代理
1.修改config/dev.env.js(开发环境的baseURL地址统一配置) 2.修改config/prod.env.js(线上环境的baseURL地址统一配置) 3.修改config/inde ...
VUE的proxyTable使用记录和java跨域设置
记一次前端解决跨域: 在webpack的dev节点中找到proxyTable,设置如下 proxyTable: {'/': {target: 'http://localhost:8088',chang ...
详解vue项目和普通项目如何解决开发环境与生产环境下的跨域问题
概念: 什么是跨域? 跨域,指的是浏览器不能执行其他网站的脚本.它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制.所谓同源是指,域名,协议,端口均相同. http://www ...
22-CMS前端页面查询开发-Api调用-跨域解决
跨域问题解决测试上边的代理 ,结果报错如下 : No 'Access-Control-Allow-Origin' header is present on the requested resou ...
十秒解决开发环境跨域问题——取消浏览器同源策略
解决开发环境跨域问题方法有很多,设置代理什么的略显繁琐:接下来介绍一个十秒解决开发环境跨域问题的方法--取消浏览器同源策,解决所有跨域问题,以谷歌浏览器为例. 一:Windows ①:关闭浏览器 ②: ...

Vue-cli proxyTable 解决开发环境的跨域问题

Vue-cli proxyTable 解决开发环境的跨域问题相关推荐

最新文章

热门文章