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调用方法时进入浏览器控制台写入 POST http://localhost:3000/api/create 404（未找到）

我试图将/ api / *和/ api / **写入配置http-proxy-middleware，但这对我没有帮助。

什么不起作用？

Answer 1

请尝试使用下面的代码，从http-proxy-middleware版本开始1.0.0，您不能使用proxy作为名称。

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

注意：可以从以下https://github.com/facebook/create-react-app/issues/8550

的一个PR讨论中找到这一点。

Answer 2

我知道为时已晚，我遇到了同样的问题。保留对我有用的东西，以便其他人可以尝试。

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

setupProxy.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);
      })
  }

http-proxy-middleware无法捕获来自React App到API的请求

2 个答案: