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)

})

相关推荐
kyriewen115 小时前
你点的“刷新”是假刷新?前端路由的瞒天过海术
开发语言·前端·javascript·ecmascript·html5
skywalk81637 小时前
Kotti Next的tinyfrontend前端模仿Kotti 首页布局还是不太好看,感觉比Kotti差一点
前端
RopenYuan9 小时前
FastAPI -API Router的应用
前端·网络·python
走粥10 小时前
clsx和twMerge解决CSS类名冲突问题
前端·css
Purgatory00110 小时前
layui select重新渲染
前端·layui
weixin1997010801610 小时前
《中国供应商商品详情页前端性能优化实战》
前端·性能优化
赵孝正12 小时前
学习的本质是一个工程闭环:从模仿到内化的四阶段方法论(附风电实战案例)
前端·数据库·学习
Panzer_Jack14 小时前
easy-live2d v0.4.0 — 全面进化的 Live2D Web 开发体验
前端