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)

})

相关推荐
AI视觉网奇4 分钟前
three-bvh-csg glb分割
开发语言·前端·javascript
zhangfeng113310 分钟前
workbuddy ,node.js 每次会在 项目目录上安装 node_modules,能不能一次安装多次使用,为什么 npm 不把包装在全局
前端·npm·node.js
一次旅行11 分钟前
CopilotKit实战:用生成式UI打造智能Agent前端
前端·人工智能·ui
禅思院28 分钟前
大列表性能优化 · 工程实战·四
开发语言·前端·性能优化·前端框架·php·异步加载
rising start29 分钟前
五、Vue3 ref 用法 + Props 完整指南
前端·javascript·vue.js
web打印社区30 分钟前
前端html转换pdf并静默打印pdf最佳实现路径
前端·javascript·vue.js·electron·html
Curvatureflight39 分钟前
浏览器音频采集实践:麦克风权限、降噪、回声消除与 PCM 转换
前端·javascript·音视频·信息与通信·web·pcm
Dontla42 分钟前
HTML实体转义(HTML Entity Escaping)介绍
前端·html
咸鱼翻身小阿橙42 分钟前
高斯模糊降噪/磨皮算法降噪图像
前端·opencv·算法·webpack·c#
ct97844 分钟前
ES6 新特性
前端·vue.js·性能优化