为啥代理在与 webpack 一起使用时不起作用

Posted 2023-03-04

【中文标题】为啥代理在与 webpack 一起使用时不起作用

【英文标题】：why proxy not working when used with webpack为什么代理在与 webpack 一起使用时不起作用

【发布时间】：2019-05-19 23:42:43

【问题描述】：

我有一个在 3300 上监听的 node.js 服务器。用 postman 测试它没问题。 我有一个使用 create-react-app 监听 3000 和 package.json 创建的反应应用程序，其中声明“代理”：“http://localhost:3300”。这也测试好了。

我在同一台机器上有另一个 react 应用程序，它使用 webpack 并在 8080 上监听。package.json 也有相同的代理语句 "proxy":"http://localhost:3300" 。在这种情况下，当我调用 api /api/users 时，我的控制台日志显示

api-auth.js:5 POST http://localhost:8080/auth/signin/ 404 (Not Found)

如果我直接将 api 称为 获取('http://localhost:3300/api/users')

它因 CORS 错误而失败。

为了更清楚一点，这个失败的反应应用程序实际上是从http://mdbootstrap.com 下载的，我在其中添加了一个登录表单来测试它是否有效。

您能帮我解决这个问题吗？

根据我的理解，只需在 package.json 中添加代理行就可以了，但不知何故，当使用 webpack 时它不起作用......我在 webpack 中也应该做些什么吗？

【问题讨论】：

我认为问题在于您在api-auth.js 或您已实现它的任何其他地方的获取功能。你也可以发送你的fetch函数吗

【参考方案1】：

你不需要代理，你可以安装 npm 包“cors”。 https://www.npmjs.com/package/cors 并在你的 node.js 服务器上使用它。这是我在 express.js 服务器上使用它的方式。

const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());

【讨论】：

正如我上面解释的，我在 node.js 中有一个服务器，它已经配置了 CORS（作为 SERVER）并且它可以工作。问题陈述是使用 webpack 配置的 react 应用程序没有使用我在 react 应用程序（客户端）中的代理设置。

【参考方案2】：

除非我弄错了，package.json 中的 proxy 不会被 webpack、webpack-dev-middleware 或 webpack-dev-server 读取。它将解释您收到的404 响应。

您应该尝试配置 devServer.proxy 。如果您愿意，您甚至可以导入 package.json 以获取服务器 URL。

这是一个简单的示例，其中 Web 服务器将请求代理到侦听 localhost:3000 的 API 服务器。

【讨论】：

对不起，我尝试了链接上提供的所有 3 个选项。它仍然是 8080 而不是 3300。

@Avinash 我添加了一个简单的示例，您可以从该示例开始。 API 服务器使用来自micro 的默认端口3000。

你好，我很抱歉，但我尝试了几种方法并进行了很多研究......实际上它应该按原样工作，但不知何故，它不起作用。我没有更改任何内容，只是复制了代码并尝试使其在 webpack 解决方案中工作。反应文档说接受标头不应该是 text/html 才能工作。我正在使用 application/json 但仍然无法正常工作。所以我会保持这个帖子，直到我可以，否则我将不得不关闭这个帖子。抱歉，您已尽力提供帮助。

@Avinash 不用担心！我可以推荐的最后一件事是尝试深入研究 devServer.proxy 配置并尝试创建一个代理配置来记录传入的请求和响应。它应该可以帮助您调试问题出在哪里......它可能是某个地方的一些小细节。

这是一个绝妙的主意。我想知道如何记录通讯。