react设置代理

1.创建一个setupProxy.js文件(文件名不能改)

2.在文件中写入一下内容

复制代码
// 配置代理---在新版本中将createProxyMiddleware需要解析出来
const {createProxyMiddleware } =require('http-proxy-middleware')

module.exports=function(app){
    app.use(
        // 第一个代理  遇见api1前缀的请求,就会触发该代理配置
        createProxyMiddleware ('/api1',{
            // 请求转发给谁
            target:'http://localhost:3000',
            changeOrigin:true,//控制服务器收到的请求头中HOST字段的值
            // 将api1变为空
            pathRewrite:{'^api1':''}//重写请求路径
        }),
        // 第二个代理
        createProxyMiddleware ('/api2',{
            target:'http://localhost:3001',
            changeOrigin:true,
            // 将api1变为空
            pathRewrite:{'^api2':''}
        }),
    )
}

3.使用

使用的时候很简单了

import axios from 'axios'

axios.get('/api1/search/user').then((res)=>{

}).catch((err)=>{

console.log(err)

})

相关推荐
前端一课5 分钟前
【前端每天一题】🔥第7题 事件冒泡与事件捕获 - 前端高频面试题
前端·面试
前端一课6 分钟前
【前端每天一题】 第 5 题:Promise.then 执行顺序深入题(微任务队列机制)
前端·面试
前端一课10 分钟前
【前端每天一题】🔥 事件循环第 6 题:setTimeout(fn, 0) 执行时机详解
前端·面试
前端一课11 分钟前
【前端每天一题】🔥 第3题 事件循环 20 道经典面试题(附详细答案)
前端·面试
前端一课14 分钟前
【前端每天一题】第 2 题:var、let、const 的区别?(绝对高频)
前端·面试
前端一课17 分钟前
【前端每天一题】🔥第四题 原型与原型链 - 前端面试必考题
前端·面试
初见00120 分钟前
告别无限循环:深入理解并征服 React Hooks 的依赖数组
前端
一颗不甘坠落的流星22 分钟前
【HTML】iframe 标签 allow 权限汇总(例如添加复制粘贴权限)
前端·javascript·html
亦草24 分钟前
浅谈现代前端体系:组件化、模块化、类型系统与工程化
前端
IT_陈寒24 分钟前
JavaScript开发者必知的7个ES2023新特性,让你的代码效率提升50%
前端·人工智能·后端