create-react-app 配置proxy的方法

最新推荐文章于 2024-09-11 09:00:22 发布

hsany330

最新推荐文章于 2024-09-11 09:00:22 发布

阅读量4.4k

点赞数

本文介绍在create-react-app最新版本中如何配置proxy。由于不再支持object形式，需使用http-proxy-middleware进行代理设置。文章详细说明了安装、配置过程及测试方法。

摘要由CSDN通过智能技术生成

最近create-react-app在"package.json"的"proxy"中不再支持写object只支持字符串了(可以简单写成 "proxy": "http://localhost:3001",)，那么我们该如何配置proxy呢？

1、安装http-proxy-middleware:
    yarn add http-proxy-middleware
2、在'src'目录下新建'setupProxy.js'并写入：
 
const proxy = require('http-proxy-middleware');
 
module.exports = function (app) {
  app.use(
      proxy(
          '/index',
          {
            target: 'https://www.bilibili.com',
            changeOrigin: true
          }
      )
  );
};
 
 
3、重新启动服务，在测试组件中加入：
componentDidMount = () => {
    axios.get('/index/recommend.json')
        .then((res) => {
             console.log(res.data.list);
        })
};
 
如果之前有多个，那么就多写几个对应的app.use();

https://blog.csdn.net/xiaoyao9524/article/details/85236550