react 配置代理 setupProxy.js导致无法连接localhost

低版本

javascript 复制代码
const proxy = require('http-proxy-middleware')
   
   module.exports = function(app) {
     app.use(
       proxy('/api1', {                         //api1是需要转发的请求(所有带有/api1前缀的请求都会转发给5000)
         target: 'http://localhost:5000',        //配置转发目标地址(能返回数据的服务器地址)
         changeOrigin: true,                  //控制服务器接收到的请求头中host字段的值
         pathRewrite: {'^/api1': ''}         //去除请求前缀,保证交给后台服务器的是正常请求地址(必须配置)
       }) 
     )
   }

换成高版本

javascript 复制代码
const { createProxyMiddleware } = require("http-proxy-middleware")
module.exports = function (app) {
  app.use(
    createProxyMiddleware("/api1",{
      target: "http://localhost:5000", //配置转发目标地址(能返回数据的服务器地址)
      changeOrigin: true, //控制服务器接收到的请求头中host字段的值
      pathRewrite: { "^/api1": "" }, 
    }),
    createProxyMiddleware("/api2",{
      target: "http://localhost:5001", //配置转发目标地址(能返回数据的服务器地址)
      changeOrigin: true, //控制服务器接收到的请求头中host字段的值
      pathRewrite: { "^/api2": "" }, 
    })
  )
}

问题即可解决。

勾八玩意,浪费时间。

相关推荐
狗哥哥1 分钟前
Pinia Store 平滑迁移:用代理模式实现零风险重构
前端·架构
老前端的功夫11 分钟前
前端水印技术深度解析:从基础实现到防破解方案
开发语言·前端·javascript·前端框架
霍格沃兹测试学院-小舟畅学12 分钟前
性能测试入门:使用 Playwright 测量关键 Web 性能指标
开发语言·前端·php
tangbin58308515 分钟前
iOS Swift 工具类:数据转换工具 ParseDataTool
前端
潜水豆18 分钟前
AI 时代的前端究竟还能积累什么
前端
www_stdio18 分钟前
手写 instanceof:深入理解 JavaScript 原型与继承机制
前端·javascript·html
boombb22 分钟前
国际化方案:多环境、多语言、动态加载的完整实践
前端
狗哥哥23 分钟前
我是如何治理一个混乱的 Pinia 状态管理系统的
前端·vue.js·架构
一 乐39 分钟前
物业管理|基于SprinBoot+vue的智慧物业管理系统(源码+数据库+文档)
前端·javascript·数据库·vue.js·spring boot
测试人社区—527243 分钟前
你的单元测试真的“单元”吗?
前端·人工智能·git·测试工具·单元测试·自动化·log4j