尝试使用导入的 js 函数启动 html 页面时，“CORS 策略已阻止从源 'null' 访问脚本”错误

Question

尝试使用导入的 js 函数启动 html 页面时，“CORS 策略已阻止从源 'null' 访问脚本”错误

noo*_*oon 10 html javascript import visual-studio-code

我在尝试使用从另一个文件导入函数的 javascript 文件启动 html 页面时遇到此错误：

Access to script at 'file:///C:/Users/bla/Desktop/stuff/practice/jsPractice/funcexecute.js' 
from origin 'null' has been blocked by CORS policy: 
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

Run Code Online (Sandbox Code Playgroud)

Failed to load resource: net::ERR_FAILED

Run Code Online (Sandbox Code Playgroud)

这是html代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>

</head>
<body>
    <script type = 'module' src='funcexecute.js'></script>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

从 html 调用的 js 文件：(funcexecute.js)

import sumup from '/funcfile.js';
console.log(sumup(1,2));

Run Code Online (Sandbox Code Playgroud)

导入的模块：（funcfile.js）

function sumup(num1, num2){
    return num1+num2;
}
export default sumup;

Run Code Online (Sandbox Code Playgroud)

我怎样才能解决这个问题？（我正在使用 vscode）

Answer 1

HAR*_*118 11

如果不使用服务器，就不能将脚本文件用作模块。看看这里

以下是一些选项

使用 Live Server（VS Code 的扩展）
使用node 中的http-server模块（通过 npm 安装，然后http-server .从您的项目目录运行）
使用python 中的http.server包
使用 wamp（或灯）服务器

总之不能type="module"与文件协议一起使用

Answer 2

fru*_*oaf 7

右键单击Visual Studio Code 中的index.html文件，选择“使用 Live Server 打开”。
这将解决您的问题。

JS 中的导出/导入仅适用于服务器，它们不适用于本地计算机（有不同的代码）。

我在我的 YouTube 频道上创建了一个分步视频。

归档时间：	5 年，10 月前
查看次数：	11676 次
最近记录：	4 年，6 月前