避免Web应用程序从其他域导入JavaScript模块时出现CORS问题

aiqt4smr  于 2023-05-27  发布在  Java
关注(0)|答案(1)|浏览(138)

我正在使用NodeJS构建一个Web应用程序,将应用程序分为后端和前端,后端用于处理MongoDB的数据库查询,前端通过基于节点的Web服务器使用interactjs和从TypeScript编译的JavaScript。目前,我在LocalHost上运行它。
对于我的前端,依靠我的桌面应用程序开发技能,我最初在无服务器的本地机器上使用几个JS模块模块构建了一个应用程序,甚至不使用本地主机。它构造流程图拖放风格实现使用typescript编译为JS。我现在已经把它移到Node了。大多数事情似乎都在工作,但在我的一个模块中,我正在导入interact.js来处理我的拖放。

import interact from 'https://cdn.jsdelivr.net/npm/@interactjs/interactjs/index.js'

然而,这似乎导致我的浏览器Firefox报告CORS错误。我已经做了相当多的阅读和理解什么是跨域资源共享,以及为什么会出现问题。然而,我还没有找到一个很好的信息来源,帮助我克服我的问题。很多信息似乎要么描述了什么是CORS错误,而没有提供解决方案,要么提供了示例mime类型,或者与此无关的fetch命令(据我所知)。
如果您正在运行位于http://localhost:5000/myApp的Web应用程序。那么我的代码如何导入外部JavaScript模块而不触发CORS错误呢?
我在Firefox的控制台中多次看到的是三个可能相关的错误:

Loading module from “https://cdn.jsdelivr.net/npm/@interactjs/actions/drag/plugin” was blocked because of a disallowed MIME type (“text/plain”).

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.jsdelivr.net/npm/@interactjs/actions/drag/plugin. (Reason: CORS request did not succeed). Status code: (null).

Module source URI is not allowed in this document: “https://cdn.jsdelivr.net/npm/@interactjs/actions/drag/plugin”.

我在这里发帖是出于绝望,因为我花了一整天的时间在圈子里转来转去,在StackOverflow或其他地方都找不到任何与我的问题有关的东西。

vof42yt1

vof42yt11#

@interactjs/interactjs模块并不意味着要在CDN上使用-您可能需要interactjs(不带前导@),因为看起来命名空间版本实际上是为了内部和构建时使用。如果你只需要drag,你可以从他们的CDN获得:import 'https://cdn.interactjs.io/v1.9.20/actions/drag/index.js'

相关问题