导航:首页 > 代理服务 > 跨域请求代理怎么实现

跨域请求代理怎么实现

发布时间:2023-09-02 19:22:36

A. 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' 时走额外代理~

阅读全文

与跨域请求代理怎么实现相关的资料

热点内容
成都哪里有古董市场 浏览:217
大屏机的文件管理是哪个程序 浏览:460
种菜有什么技术 浏览:732
山东省还有哪些蛐蛐市场没有关闭 浏览:682
合肥前端程序员私活多少钱 浏览:715
第六感技术怎么样 浏览:397
农产品需求提高后要进行哪些措施 浏览:277
喜茶怎么砍掉产品 浏览:931
机械与技术是什么 浏览:760
excel如何根据数据长度取舍 浏览:852
微商是如何编辑信息 浏览:232
枞阳安庆哪里有花卉批发市场 浏览:141
今年什么产品获批 浏览:273
股票电脑化交易有什么特征 浏览:785
怎么不打电话只给警察发信息 浏览:251
机械设计代理网站有哪些 浏览:821
信息工程与电气自动化哪个好 浏览:430
使徒礼包哪些可以交易 浏览:437
泰国虾批发市场在哪里 浏览:727
推拿技术有哪些好处 浏览:673