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

在package.json

中

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

Answer 3

我知道我在这里玩游戏有些迟了，但是我将其留在这里以备将来参考。

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

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 Apps是使用AJAX / Fetch与某些API通信的SPA（单页应用程序）。 API通常使用JSON或XML，但不使用text/html。

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 Dev Server在您的Webpack配置中使用devServer.proxy config来控制代理请求。