JavaScript导入模块中的交叉原点



我有一个index.html文件,该文件连接到名为main.js的文件。我尝试使用import将另一个js文件导入main.js,但总是会出现以下错误:

在'访问脚本file:///C:/...js/main.js"from origin"null"已被CORS策略阻止:跨来源请求仅支持以下协议方案:http、data、chrome、chrome扩展、https。"。

我试图打开一个服务器,但没有解决问题。我不知道问题是在我的html文件还是js文件中,我真的需要你的帮助。

我的代码如下:

index.html

<body>
<script type="module" src='./js/main.js'></script>
</body>

main.js

import {
double
} from './utils.js';

utils.js

export function double(n) {
return n * 2;
}

您现在可能已经解决了这个问题,但对于将来在谷歌上搜索的人来说,以下是解决方案。

错误消息表示您无法从原始文件"访问该文件;空";,并声明您只能使用某些协议方案来执行这些请求。您计算机上的本地文件所具有的协议方案是";文件://";,我认为其起源是:;空";问题是它不在网站上(例如。http://a.comvsfile://a/b/c)。

要解决此问题,您需要启动一个本地服务器。最简单的方法是使用这个python one-liner。如果您使用的是MacOSX或Linux,请继续使用以下命令:

$ cd path/to/website
$ python -m SimpleHTTPServer 8080
Serving HTTP on 0.0.0.0 port 8000 ...

如果您使用的是Windows,则需要在制作服务器之前安装Python。为此,请访问他们网站上的下载页面并下载最新版本。要检查是否已安装,请在命令提示符下运行以下命令:

python -V

如果您得到类似Python 3.9.5的东西,您可以继续运行前面提到的命令。

启动服务器后,只需在浏览器中导航到http://localhost:8080/即可。

最新更新