web-dev-qa-db-ja.com

インポートされたjs関数を使用してhtmlページを起動しようとすると「Origin 'null'からスクリプトへのアクセスがCORSポリシーによってブロックされました」エラー

別のファイルから関数をインポートした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.

Failed to load resource: net::ERR_FAILED

これが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>

htmlから呼び出されたjsファイル：（funcexecute.js）

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

インポートされたモジュール：（funcfile.js）

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

どうすれば修正できますか？ （私はvscodeを使用しています）

javascripthtmlvisual-studio-codeimport
3
noon

サーバーを使用しないと、スクリプトファイルをモジュールとして使用できません。 こちらをご覧ください

ここにいくつかのオプションがあります

  • Live Server（VS Codeの拡張）を使用する
  • ノードから http-server モジュールを使用します（npmを介してインストールしてから、プロジェクトディレクトリからhttp-server .を実行します）
  • pythonの http.server パッケージを使用
  • ワンプ（またはランプ）サーバーを使用する

つまり、fileプロトコルではtype="module"を使用できません

1
HARDY8118