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 ：

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

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 }  }
 }

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 开发服务器通常使用上下文/命名空间来区分要服务的内容和转发的内容。 create-react-app 脚本不会从 package.json 文件中的代理路径中提取命名空间。相反，脚本具有自以为是的默认行为，即任何使用 HTTP GET 以外的东西的请求都将被转发。此外，任何使用 HTTP GET 但不是 text/html 作为 Accepts 标头的内容都将被转发。

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

Answer 3

在 package.json 中

"proxy": {
    "/api/users": {
        "target": "http://localhost:3000"
    }
},

Answer 4

https://github.com/webpack/webpack-dev-server/issues/793#issuecomment-316650146 中用户 jellyfish-tom 的解决方案对我有用。

devServer: {
  proxy: {
    "*": "http://[::1]:8081"
    // "secure": false,
    // "changeOrigin": true
  }
},

Answer 5

Webpack 开发服务器在您的 Webpack 配置中使用 devServer.proxy config 来控制代理请求。