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

Webpack Dev Server 在您的 Webpack 配置中使用 devServer.proxy config 来控制代理请求。

Answer 2

您可以修改您的提取请求 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 3

在package.json

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

Answer 4

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

要使 devServer 代理按预期工作，您需要将 HTTP Accepts header 指定为 "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 通常使用 context/namespace 来区分服务内容和转发内容。 create-react-app 脚本不会从 package.json 文件中的代理路径中提取命名空间。相反，脚本具有自以为是的默认行为，即任何使用除 HTTP GET 以外的东西的请求都将被转发。此外，任何使用 HTTP GET 而不是 text/html 作为 Accepts header 的内容都将被转发。

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

Answer 5

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

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

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

Proxy in package.json not affecting fetch request

api

proxy

node.js

reactjs

create-react-app