react 17.0的情况下使用http-proxy-middleware

在React 17.0中使用http-proxy-middleware需要进行以下步骤：

1. 首先安装axios和http-proxy-middleware：

npm i axios http-proxy-middleware -S

2. 在src目录下创建一个setupProxy.js文件，并在其中配置反向代理：

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000', // 将请求代理到5000端口
      changeOrigin: true,
    })
  );
};

3. 在组件中使用axios发送请求：

import axios from 'axios';

axios.get('/api/data')
  .then(res => console.log(res.data))
  .catch(err => console.log(err));

注意：在React 17.0中，不需要手动降低React和React-dom的版本。

相关问题

react 中使用http-proxy-middleware

在React中使用http-proxy-middleware可以将请求转发给其他服务器，以下是使用http-proxy-middleware的步骤：

1.安装http-proxy-middleware

npm install --save-dev http-proxy-middleware

2.在src同级目录创建setupProxy.js文件，代码如下：

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

module.exports = function (app) {
  app.use(createProxyMiddleware('/api', {
    target: 'http://ip:8000/', // 将请求转发到的服务器地址
    pathRewrite: {
      '^/api': '', // 将请求中的/api替换为空
    },
    changeOrigin: true, // 是否跨域
    secure: false, // 是否验证证书
    ws: true, // 启用websocket
  }));
};

3.在React组件中使用转发后的请求，例如：

fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));