超文本传输协议-代理-中间件不捕获从响应应用程序到API的请求

Question

进入我的组件

axios.post('/api/' + 'create', {
  name: 'new name'
}, 
{
                headers:
                {
                    'Content-Type': 'application/json'
                }
}
)

进入setupProxy.js，由第三部分官方指令创建https://facebook.github.io/create-react-app/docs/proxying-api-requests-in-development

const proxy = require('http-proxy-middleware');

module.exports = function (app) {
    app.use(proxy('/api/', {
        target: 'http://my-api.com/',
        changeOrigin: true
    }));
};

当我使用axios从我的应用程序向浏览器控制台调用方法时，请编写POSThttp://localhost:3000/api/create404（未找到）

我试图将/api/*和/api/**写入配置http代理中间件，但没有帮助。

什么不起作用？

Answer 1

我知道很晚了，我也遇到了同样的问题。保留对我有用的东西，这样其他人就可以尝试一下。

我代理了这个endpoint-https://services.odata.org/V2/Northwind/Northwind.svc/Customers?$format=json

设置代理。js

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = (app) => {
    app.use(createProxyMiddleware('/api2', {
        target: 'https://services.odata.org/V2/Northwind/Northwind.svc/',
        changeOrigin: true,
        pathRewrite: { '^/api2': '' }
    })
    );
}

你的js文件

triggerCORSCall() {
    axios.get(`/api2/Customers?$format=json`)
      .then(response => {
        alert('Success');
      }).catch(error => {
        alert('Failure');
        console.log(error);
      })
  }

Answer 2

请尝试使用以下代码，从超文本传输协议-proxy-middlewareversion1.0.0开始，您不能使用代理作为名称。

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = (app) => {
  app.use(createProxyMiddleware('/api',
  { target: 'http://localhost:3001/' 
  }));
}