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'
}
}
}
vue-cli的这个设置来自于其使用的插件http-proxy-middleware
github：https://github.com/chimurai/http-proxy-middleware
深入了解的话可以看该插件配置说明，似乎还支持websocket，很强大的插件。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在Vue.js中页面跳转是前端开发中常见的需求,Vue提供了多种页面跳转方式,这篇文章主要给大家介绍了关于vue跳转方式的常见方式以及区别分析的相关资料,需要的朋友可以参考下2024-02-02
本文主要介绍了VUE中Non-Props属性的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-05-05
页面中会有很多时候需要弹窗提示,下面这篇文章主要给大家介绍了关于Vue设置提示和警告弹出框的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-02-02
下面小编就为大家带来一篇vue-ajax小封装实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
教你使用vue-autofit 一行代码搞定自适应可视化大屏
这篇文章主要为大家介绍了使用vue-autofit 一行代码搞定自适应可视化大屏教程详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-05-05
最近公司项目需要，利用vue实现pdf导出，从而保存到本地打印出来，说起来好像也很容易，具体要怎么实现呢？下面小编给大家带来了vue实现pdf导出解决生成canvas模糊等问题，需要的朋友参考下吧2018-10-10
今天小编就为大家分享一篇VUE实现强制渲染,强制更新，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
vue自定义密码输入框解决浏览器自动填充密码的问题(最新方法)
这篇文章主要介绍了vue自定义密码输入框解决浏览器自动填充密码的问题,通过将密码输入框的type设置为text，修改样式上的显示，来实现既可以让浏览器不自动填充密码，又可以隐藏密码的效果，需要的朋友可以参考下2023-04-04
在前端开发中，如果需要模拟后端数据，而又不想开发一个后端服务器， 则可以借助mock.js配置一个后端服务器来返回前端需要的数据，本文将会分别介绍在Quasar项目和Vite项目中Mock服务器的配置方法2022-12-12
在Vue3中,公共组件的main.js文件扮演着非常重要的角色,它的作用主要体现在：注册全局组件、引入公共样式、引入Vue、引入组件、创建Vue实例、挂载实例,本文将围绕Vue3公共组件的main.js文件进行详细的阐述,包括其作用、常用代码等方面2023-08-08
最新评论