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]

import test

[/html]

[html]
// index.js
import { App } from “./src/App.js”;
const app = new App();
[/html]

[html]
// src/App.js
console.log(“App.js: loaded”);
export class App {
constructor() {
console.log(“App initialized”);
}
}
[/html]