vue 前端设置跨域多代理
在项目开发的时候经常会遇到后端提供的多个服务请求地址域名或端口号不一致的情况这时候就需要前端设置敏答多个proxy跨域代理,本文以vue-element-admin为例展示步骤如下卖拿轮:
1: 配置环境变量 .env.development
2: 配置项目根目录下的vue.config.js 找到devServer
PS:注意VUE_APP_BASE_API 放在数组的最后一个,如果你VUE_APP_BASE_API跟我一样设置为'' 的话,这样才不会被代理的虚拟path覆盖!
3: 找到项目中管理请求地址的文件 src/api/proxy.js (proxy.js 是我随便起的名字😄)
打开proxy.js
proxy_api 就是你之前在步骤1:中定义的虚拟path
VUE_APP_BASE_API_PROXY = '/proxy-api'
const url = (path) = (proxy_api + path) 一个路径处理函数,参数是'/xx/xxx/fetch/list',return (proxy_api + path)
需要额外注意的是我在配置环境变量 .env.development的时候基础api设置的是空:
所以不需要在src/utils/request.js 中对代理的请求进行拦截
如果你为VUE_APP_BASE_API设置了虚拟path路径,那么就需要在src/utils/request.js为这个虚拟路径中信配置拦截,比较麻烦比不建议这么做。
至此跨域多代理已经设置完了,本文中设置两个代理一个基础代理VUE_APP_BASE_API,一个额外代理VUE_APP_BASE_API_PROXY,默认情况下走基础代理,当请求匹配到匹'/proxy-api' 时走额外代理~
Vue配置代理 解决跨域
方法一
在vue.config.js中添加如下配置: devServer:{ proxy:"" }
说明: 1. 优点:配置简单,请求资源时直接发给前端(8080)即可。
2. 缺点:不能配置多个代理,不能灵活的控制请求是否扒悄走代理。
3. 工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器 (优先匹配前端春备渣资源)
方法二 编写vue.config.js配置具体代理规则:
module.exports = {
devServer: {
proxy: { '/api1': {// 匹配所有以 '/api1'开头的请求路径
target: '',// 代理目标的基础路径
changeOrigin: true,
pathRewrite: {'^/api1': ''}
},
'/api2': {// 匹配所有以 '/api2'开头的请求路径
target: '',// 代理目标滚帆的基础路径
changeOrigin: true,
pathRewrite: {'^/api2': ''}}}}
} /*
changeOrigin设置为true时,服务器收到的请求头中的host为:localhost:5000
changeOrigin设置为false时,服务器收到的请求头中的host为:localhost:8080
changeOrigin默认值为true */
说明: 1. 优点:可以配置多个代理,且可以灵活的控制请求是否走代理。
2. 缺点:配置略微繁琐,请求资源时必须加前缀。
链接:
关于vue中配置代理请求(配置跨域)
刚接手个项目,上手的时候想看下请求接口:
那尼?为啥是localhost。。。当时我的心里真的是有一万只草泥马在奔腾,因为大指之前只是看过,没有真实的使用过,第一次碰历岁到的时候,心里还是懵逼的,现在基本熟悉之后,把配置代理这一块整理一下吧。
配置代理分两种情况吧,一种是可以看到config文件夹的,另一种当然就是不可以看到文件夹的啦,我下面就对这两种情况具体说一下吧。
在文件夹之内默认的应该有这三个文件:
在index.js文件内找到dev的配置:
当没有config文件夹的时候,用编辑器打开的时候会看到下面的文件:
重点还是看vue.config.js,打开肢仿睁配置文件的时候,在文件内部有devServer的配置:
vue 设置代理
原文:
这敏穗里的vue代理是 vue静态服务器做代理。使用的是 http-proxy-middleware 这个模块(这个模块相当于是node.js的一个插件)。
注:
1、我的 api='/rng'
我的请求地址 ${api}/xxxx/xxx ,请求地址就为 '/rng/xxxx/xxx'
当node服务器 遇到 以 '/rng' 开头的请求 ,就会把 target 字段加上,那么我的请求地址就为
2、 pathRewrite 意思是缺兄 把 /rng 替换为 空,那桥扮卜么我的请求地址就为 (用在如果你的实际请求地址没有 rng 的情况)(对这一块的理解不太透彻,即使把'/rng' 的名重写成了'/' 但是在请求的接口里也会显示 '/rng')