我正在尝试使用 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：
请告诉我，如果您需要从我的项目中看到任何其他内容。我很抱歉，如果我遗漏了一些东西并且不彻底，我对使用这些技术仍然很陌生。
您可以修改您的 fetch request API url 以提供完整的主机名，因为
fetch('http://localhost:3000/api/users')
还要确保您已CORS在后端启用
如果你想通过重定向的WebPack，你可以尝试devServer.proxy为
devServer: {
inline: true,
contentBase: './dist',
port: 3001,
proxy: { "/api/**": { target: 'http://localhost:3000', secure: false } }
}
我知道我在这里玩游戏有点晚了，但我会把它留在这里以供将来参考。
要使 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.
在 package.json 中
"proxy": {
"/api/users": {
"target": "http://localhost:3000"
}
},
用户 jellyfish-tom 在https://github.com/webpack/webpack-dev-server/issues/793#issuecomment-316650146 中的解决方案对我有用。
devServer: {
proxy: {
"*": "http://[::1]:8081"
// "secure": false,
// "changeOrigin": true
}
},
的WebPack开发服务器使用devServer.proxy的配置在你的WebPack配置来控制请求代理。