为什么与webpack一起使用时代理不起作用

时间:2018-12-19 13:08:19

标签: reactjs webpack proxy cors

我有一个侦听3300的node.js服务器。已通过邮递员测试正常。 我有一个使用create-react-app侦听3000和package.json并具有语句“ proxy”:“ http://localhost:3300”的React应用程序。还可以测试。

我在同一台机器上有另一个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称为     fetch('http://localhost:3300/api/users')

它因CORS错误而失败。

更清楚地说,这个失败的react应用实际上是从http://mdbootstrap.com下载的,我在其中添加了一个登录表单以测试其是否有效。

能否请您帮我解决此问题?

根据我的理解,仅通过在package.json中添加代理行即可达到上述目的,但在使用webpack时它不起作用....在webpack中我也应该做些什么吗?

2 个答案:

答案 0 :(得分:0)

您不需要代理,可以安装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());

答案 1 :(得分:0)

除非我弄错了,否则{ proxy }package.jsonwebpack不会读取webpack-dev-middleware中的webpack-dev-server。它将解释您收到的404响应。

您应该尝试配置helpers.concat。如果愿意,您甚至可以导入package.json来获取服务器URL。

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

{ devServer.proxy }