Q&A
回答ありがとうございます。
ベストアンサーは別の方を選ばせていただきましたが、こちらの回答も非常に参考になりました。
実現したいこと
あるJSをモジュールを導入して改良しようとしています。
ですが、使用するHTMLのあるサイトとJSを置くサーバーが別ドメインの為、後述のサンプルのような場合、CORSエラーが発生します。
前提
HTML、JS共にライブドアブログの為、
Access-Control-Allow-Origin ヘッダを付ける事ができません。
これ以外の解決方法はありますでしょうか？
HTMLとmodule.jsがクロスドメインなのは分かりますが、
そもそもmain.jsが実行できるのに、そこから同ドメインにあるモジュールを実行するのにCORSが必要な意味がわかりません。
発生している問題・エラーメッセージ
該当のソースコード
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> 5<title>モジュールテスト</title> 6<script defer src="https://js-serv.xxx/main.js"></script> 7</head> 8<body> 9 10<button id="btn" type="button">ボタン</button> 11 12</body> 13</html>
JavaScript
1'use strict'; 2window['btn'].addEventListener('click', async e => { 3 let mod = await import('./module.js'); 4 alert(mod.say()); 5}, false);
JavaScript
1let name = '太郎'; 2let age = 30; 3function say () { 4 return `${name}は${age}歳です`; 5} 6 7export {name, age, say};
試したこと
補足情報（FW/ツールのバージョンなど）
回答2件
0
ベストアンサー
HTMLとmodule.jsがクロスドメインなのは分かりますが、
そもそもmain.jsが実行できるのに、そこから同ドメインにあるモジュールを実行するのにCORSが必要な意味がわかりません。
残念ながら、そういう仕様です（WHATWG）。import()で呼ぶスクリプトに対しては、HTMLのオリジンを基準としてCORSが適用されます。
モジュールでない<script>は、CORSより前から存在する関係上、クロスオリジンでも問題なく実行されてしまいます。
投稿2024/06/27 00:01
総合スコア146618
0
すでにご自身で理解している通りmoduleは無条件にCORSを超えることはできません
設定をするか諦めるかのどちらかです。
趣旨は違いますがmoduleがだめならクラスで代替するとかやり方次第でしょうね
html
1<script src="https://example.com/main.js"></script> 2<button id="btn" type="button">ボタン</button>
javascript
1window.addEventListener('DOMContentLoaded', ()=>{ 2 document.head.appendChild(Object.assign(document.createElement('script'),{src:"https://example.com/module.js"})); 3}); 4document.addEventListener('click',({target})=>{ 5 if(target.matches('#btn')){ 6 let mod = new mymodule; 7 alert(mod.say()); 8 } 9});
javascript
1class mymodule{ 2 name = '太郎'; 3 age = 30; 4 say () { 5 return `${this.name}は${this.age}歳です`; 6 } 7}
投稿2024/06/27 01:16
総合スコア117755
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2024/06/27 20:01
2024/06/28 00:07