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

Question

我试图使用React从开发服务器获取一些数据.

我正在运行客户端localhost:3001和后端port 3000.

获取请求:

 const laina = fetch('/api/users');
    laina.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网址以提供完整的主机名

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

还要确保CORS在后端启用了

如果您想thourgh的WebPack重定向,你可以尝试devServer.proxy为

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 Dev Server 通常使用上下文/命名空间来区分要提供的内容和要转发的内容。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"
    }
},