package.json 中的代理不影响获取请求

Question

我正在尝试使用 React 从开发服务器获取一些数据。

我在 --- 上运行客户端，在 localhost:3001 port 3000 运行后端。

获取请求：

  const users = fetch('/api/users');
    users.then((err,res) => {
      console.log(res);
    })

当我运行我的开发服务器和 webpack-dev-server 时，我得到以下输出：

 GET http://localhost:3001/api/users 404 (Not Found)

我尝试在 package.json 中指定代理，以便将请求代理到 API 服务器，但是没有任何改变。

这是我的 package.json 文件：

.. 和 webpack.config ：

请告诉我，如果您需要从我的项目中查看其他内容。很抱歉，如果我遗漏了一些东西并且不够彻底，那么我对使用这些技术还是很陌生。

原文由 Radoslav Naidenov 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以修改获取请求 API url 以提供完整的主机名，因为

 fetch('http://localhost:3000/api/users')

还要确保您的后端启用了 CORS

如果你想通过 webpack 重定向，你可以尝试 devServer.proxy as

 devServer: {
    inline: true,
    contentBase: './dist',
    port: 3001,
    proxy: { "/api/**": { target: 'http://localhost:3000', secure: false }  }
 }

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我知道我在这里玩游戏有点晚了，但我会把它留在这里以供将来参考。

要使 devServer 代理按预期工作，您需要将 HTTP Accepts 标头指定为“text/html”以外的内容。使用 fetch 接受的 init-object 作为第二个参数执行此操作。一个简单的例子：

 fetch("/api/profile",{
    headers:{
        "accepts":"application/json"
    }
})
.then(res => {
    console.log(res);
    return res.json();
})
.then(json => console.log(json) )
.catch( a => { console.log(a) });

这样做的原因是 WebPack Dev Server 通常使用上下文/命名空间来区分服务内容和转发内容。 create-react-app 脚本不会从 package.json 文件中的代理路径中提取命名空间。相反，脚本具有自以为是的默认行为，即任何使用除 HTTP GET 以外的东西的请求都将被转发。此外，任何使用 HTTP GET 而不是 text/html 作为 Accepts 标头的内容都将被转发。

原因是因为大多数 React 应用程序都是 SPA（单页应用程序），它们使用 AJAX/Fetch 与某些 API 进行通信。 API 通常使用 JSON 或 XML，但不使用 text/html 。

原文由 Canis 发布，翻译遵循 CC BY-SA 4.0 许可协议