在react脚手架中设置反向代理

最新推荐文章于 2023-05-30 11:02:45 发布

尼古拉斯二嘎

最新推荐文章于 2023-05-30 11:02:45 发布

阅读量967

点赞数 3

CC 4.0 BY-SA版权

分类专栏： react

本文链接：https://blog.csdn.net/qq_35629054/article/details/106934648

react 专栏收录该内容

20 篇文章

订阅专栏

本文详细介绍了如何在React项目中使用http-proxy-middleware包进行反向代理设置，包括创建setupProxy.js文件及正确配置，以解决跨域问题，并对比新旧版本的不同。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我在这里用了http-proxy-middleware包（需要执行cnpm i http-proxy-middleware --save -dev），当然大家也可以用其他方式：如node、nginx、等等我就不再一一描述了，教大家最简单暴力的

1.在src下创建一个setupProxy.js的js文件，此文件创建后会自动被config->paths.js使用
在这里插入图片描述
2.然后在setupProxy.js写如下代码（2020-6-23日下载的版本）

const { createProxyMiddleware } = require('http-proxy-middleware')

module.exports = function (app) {
  app.use(createProxyMiddleware('/api', {
    target: 'http://10.16.21.29:8080/A/ar/api',
    secure: false,
    changeOrigin: true,
    pathRewrite: {
      "^/api": ""
    }
  }))
}

以上就完成了react的反向代理，记得要重启项目才会生效哦！

深夜踩坑指南

1.网上很多老版本的写法如下：
在这里插入图片描述

上面会报proxy is not a funtion 表示此方法已经被弃用，读者们可自行尝试并查阅官网

2.旧版可在package.json中设置proxy属性

"proxy": {
    "/api/**": {
      "target": "http://172.16.136.249:8080",
      "changeOrigin": true
    }
  }

但是你在新版中这么使用会提示proxy必须是字符串，原来新版的只支持代理一个url，如需代理多个请参考上面的http-proxy-middleware

新版本在package.json中设置proxy属性

"proxy": "http://10.29.33.107:8080"

如果以上内容对您有帮助，请给个赞支持一下笔者，谢谢！