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)

})

相关推荐
小小码农Come on5 分钟前
QPainter双缓冲区实现一个简单画图软件
linux·服务器·前端
nunumaymax7 分钟前
【第三章-react 应用(基于 react 脚手架)】
前端·react.js·前端框架
空中海10 分钟前
第一章:Vue 基础与模板语法
前端·javascript·vue.js
每天吃饭的羊24 分钟前
水平,垂直居中
前端·javascript·html
倾颜28 分钟前
React 19 源码怎么读:createRoot 和 root.render 到底做了什么?
react.js
鼎道开发者联盟1 小时前
鼎享会 | OpenClaw Control UI 前端架构全解析:自研 UI 对接 Server 实操指南
前端·ui·架构·openclaw·control ui
尘世中一位迷途小书童1 小时前
一套完整的给予ceium封装的组件库,可满足企业级开发
前端
Z_Wonderful1 小时前
微前端:Webpack 配置 vs Vite 配置 超清晰对比
前端·webpack·node.js
码云数智-园园1 小时前
HTTPS是如何工作的?从HTTP到HTTPS的加密演进
前端
隔窗听雨眠1 小时前
HTML头部元信息避坑指南
前端·html