使用HTTP代理中间件在reactjs应用程序中无法识别setupProxy.js路径

问题描述

我在我的react应用中实现了http代理中间件，我的setupProxy.js路径无法识别。下面是我的代码，如果我做错任何事情，请告诉我。

应用程序组件

class App extends React.Component {
  test = () => {
// I dont have any thing which is running in "/api"  
// Simply called fetch with "/api" because setupPorxy.js  is looking my request or not 
    fetch("/api")
      .then(res => {
        alert('test pri')
        console.log('res',res)
      })
  }
  render() {
    return (
      <div className="App">
        <button onClick={this.test}>Test</button>
      </div>
    );
  }
}

setupProxy.js

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

\\ I dont have any thing running on localhost 5000,want to check the request is modified or not 

module.exports = (app) => {
    app.use(createProxyMiddleware('/api',{ target: 'http://localhost:5000',changeOrigin: true }));
}

输出

But ended with 404 not found in browser console like http://localhost:3000/api (404 not found)

当我启动应用程序时，有如下所示的日志，但没有替换目标

解决方法

通过您的代码，我可以看到您使用过create-react-app。您尚未显示package.json。您添加了代理吗？我想您可能已经错过了。

package.json

{
   ....
   "proxy": "http://localhost:5000",}