jsでimportする時はfile://だとダメ！webサーバ上でhttp://でアクセスする必要がある(CORSエラー)

参考URL
https://jsprimer.net/use-case/todoapp/entrypoint/

javascriptを学びなおして、ES6から導入された外部モジュールの読み込みは、file://だとダメ！webサーバ上でhttp://でアクセスする必要があるのね・・・。

正) http://localhost:8080/
誤) file:///Applications/MAMP/htdocs/index.js

Access to script at ‘file:///Applications/MAMP/htdocs/index.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.

originは、http://(プロトコル) + localhost(ドメイン) + :8080(ポート)の組み合わせだから
file://だとoriginがnullになり、同一オリジン判定できないからダメ！って事なのかな・・・。

CORS(Cross Origin Resources Sharing)
https://qiita.com/att55/items/2154a8aad8bf1409db2b

あと、scriptタグで、type=”module”って指定する必要がある。

<html lang="ja">
  <head>
    <meta charset="utf-8" />
    <title>import test</title>
  </head>
  <body>
    <h1>import test</h1>
    <script type="module" src="index.js"></script>
  </body>
</html>

<head>

<title>import test</title>

</head>

<body>

<h1>import test</h1>

</body>

</html>

// index.js
import { App } from "./src/App.js";
const app = new App();

// index.js

import { App } from "./src/App.js";

const app = new App();

// src/App.js
console.log("App.js: loaded");
export class App {
    constructor() {
        console.log("App initialized");
    }
}

// src/App.js

console.log("App.js: loaded");

export class App {

constructor() {

console.log("App initialized");

}

関連記事