安装Express和Cors后反应应用程序编译错误

Question

我正在开发一个React应用程序，它的重点是从服务器获取一个mp3文件，但是我得到了一个CORS错误。在尝试按照提示来启用CORS时，我首先通过npm安装express和cors ('npm install‘和'npm install’)。然而，我现在得到了30个编译错误。以下是一条这样的错误消息：

ERROR in ./node_modules/body-parser/lib/read.js 24:11-26

Module not found: Error: Can't resolve 'zlib' in '/home/brian/Projects/music-player/node_modules/body-parser/lib'

BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
This is no longer the case. Verify if you need this module and configure a polyfill for it.

If you want to include a polyfill, you need to:
    - add a fallback 'resolve.fallback: { "zlib": require.resolve("browserify-zlib") }'
    - install 'browserify-zlib'
If you don't want to include a polyfill, you can use an empty module like this:
    resolve.fallback: { "zlib": false }

我如何解决这个问题，这些网络包和多填充是什么？提前感谢你的帮助。

Answer 1

不幸的是，关于你的应用程序是如何设置的，这不是很多信息。我猜你正试图在你的前端应用程序中安装express (设置服务器)。如果是这样的话，我建议您从react中卸载它，并将其安装在另一个目录中。

然而，如果这个问题仍然存在的话，这对我来说是可行的。在我这边，npm缓存有一个问题。

npm cache clean --force：

• 试图清理npm缓存

​

如果这样做不起作用：

• 删除节点模块
• 删除包-lock.json文件
• 使用npm install获得更新的节点模块和新包-lock.json文件

​

Webpacks用于在不支持特定功能的旧浏览器上实现功能(例如，Internet 11不支持

())，Webpacks是一个模块绑定器。它的目的是编译JavaScript模块，它基本上接受项目依赖项(package.json)并生成依赖关系图。

现在关于CORS问题。您是否拥有要检索mp3数据的服务器？然后，您应该允许来自该服务器的交叉来源，在服务器响应中设置适当的头：Access-Control-Allow-Origin: *。

如果您没有权限，或者您无法访问服务器，您可以设置自己的服务器来处理api调用并从另一个服务器检索数据，而不会出现任何CORS问题。您可以使用Express完成此操作，然后通过服务器请求资源，并将响应发送回您的前端。

请注意，您不能从前端直接修复CORS问题！