前端请求代理配置,解决跨域问题,适用于React、Vue项目
1. 优点:可以配置多个代理,可以灵活控制请求是否走代理。
2. 缺点:配置繁琐,前端请求资源时必须带上前缀。
前端请求代理配置,解决跨域问题,适用于React、Vue项目
- 优点:可以配置多个代理,可以灵活控制请求是否走代理。
- 缺点:配置繁琐,前端请求资源时必须带上前缀。
第一步 安装
| yarn add http-proxy-middleware --save |
第二步 新建文件
在项目的 src 目录下新建文件 setupProxy.js ,脚手架会自动解析该文件。
第三步 配置代理
在setupProxy.js文件中写入如下代码配置:
| const { createProxyMiddleware } = require ('http-proxy-middleware'); |
| module.exports = function(app){ |
| app.use( |
| createProxyMiddleware( |
| '/api1', |
| target:'http://localhost:3000', |
| |
| |
| |
| changeOrigin:true, |
| pathRewrite:{ |
| '^/api1':'' |
| } |
| ), |
| |
| createProxyMiddleware( |
| '/api2', |
| target:'http://localhost:3000', |
| |
| |
| |
| changeOrigin:true, |
| pathRewrite:{ |
| '^/api2':'' |
| } |
| ) |
| ) |
| } |
| |
第四步 安装 axios 请求库
第五步 开始 axios 请求
| import axios form "axios"; |
| |
| axios.get("/api1/getData", {params:{a:10,b:'ok'}}).then(res=>{ |
| console.log(res) |
| }) |
| |
| |
| |
| const result = axios.get("/api2/getData", {a:10,b:'ok'}).then(res=>{ |
| console.log(res) |
| }) |
| |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库