Q&A
HMLのソースコードを提示してください。
htmlファイルをChromeで開くとコンソールに以下のようなエラーが表示されます。どうしたら解決できるでしょうか？
Access to script at 'file:///Users/○○○/Desktop/dev/threeJs-Project/threeJs-Udemy-4/main.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ThreeJs-Udemy</title>
</head>
<body>
<script src="main.js" type="module"></script>
</body>
</html>
main.js
import * as THREE from "./build/three.module.js";
const scene = new THREE.Scene();
console.log(scene);
このようになっています。three.jsを使おうとしているのですが、うまくいきません。
質問本文は修正できるので、そのソースコードを、質問本文に記載お願いします。
回答1件
0
ベストアンサー
JavaScriptのimportを使うには、
クロスオリジン問題をクリアする必要があります。
import - JavaScript | MDN
ローカルでクロスオリジンをクリアするには、ローカルでApacheなどを起動するようなアプリケーションを使用し、
httpアクセスとする必要があります。
また、ブラウザの起動オプションを使用し、クロスオリジンを無視してHTMLを実行する方法もあるらしいですが、
私はうまく行ったことがありません。
投稿2022/04/01 08:31
総合スコア9572
ありがとうございます。
Apacheを起動するようなアプリケーションはどのようなものがありますか？
Windowsならば、XAMPP、macOSならば、MAMPが有名です。
特にこだわりがなければ、上記どちらかを使ってみるとよいかと。
ちなみに、WindowsでMAMP、macOSでXAMPPは、やめときましょう。
初学でやると、火傷します。
あとは、
CodeSandboxなど、ソースコードをサーバー上で書いて動作させるのを練習できるサービスもけっこうありますので、
自身でローカル環境を作るのがハードル高ければ、そのようなサービスを利用されるとよいかと。
ご丁寧にありがとうございました。試してみます！
度々すみません。
MacでMAMPの設定をしているのですが、Documentrootを該当のindex.htmlのファイルに指定しました。その後どのようにすればブラウザ上で見ることができるでしょうか？
申し訳ありません。解決しました。ありがとうございました。
あなたの回答
tips
プレビュー
