Q&A
あとは、「自分のマシンだけNode.jsでビルド環境を組んで、出来上がって1本になったJavaScriptファイルだけ配布する」という方法も考えられます。
前提・実現したいこと
javascriptとHTMLでChrome上で動作するWebアプリを作っています。
メインのjsファイルで計算した値を別のjsファイル渡し、HTML上に表示したいです。
import-exportを使おうと、簡単なプログラムを試して見ましたが、以下のエラーメッセージが発生しました。CORSエラーに関する同様の質問でサーバーを立てようという提案がありましたが、何のサーバーなのか具体的な方法がわかりません。
requireの使用も検討しましたがnode.jsのインストールが必要とあり、他のメンバーも対応が必要だと考え、避けました。
代替手段等あれば教えていただきたいです。
発生している問題・エラーメッセージ
Access to script at 'file:///C:/Users/.../test.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
該当のソースコード
javascript
1//myfunc.js 2export const tes = 11111;
Javascript
1//test.js 2 import {tes} from "./myfunc.js"; 3console.log(tes); 4
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>test</title> 6</head> 7<body> 8</body> 9 <script type="module" src="test.js"></script> 10</html>
試したこと
同様のテストプログラムとしてコードを以下に変更しましたが、同じエラーが出ました。
//myfunc.js export default function () { console.log("Hellow"); };
//test.js import {myfunc} from "./myfunc.js" myfunc();
また、メインのjsで計算した値を直接計算結果を表示するHTMLに参照させた場合、jsコード内でclass名を指定したHTML要素が見つからない(該当class名の要素はメインのHTML上にあり、計算結果を表示するHTMLにはないので当然)などのエラーでjavascriptの読み込みが途中で止まりました。
補足情報（FW/ツールのバージョンなど）
ブラウザ：Google Chrome is up to date
Version 78.0.3904.108 (Official Build) (64-bit)
エディター：Visual Studio Code
version:1.40.2(user setup)
回答2件
0
ベストアンサー
何のサーバーなのか具体的な方法がわかりません。
HTTPサーバ（WWWサーバとも言われます）です。
- Apacheなどの普及した高度なサーバーを導入する。
- NodeJS などを使い、自分で書く。
- 「簡易サーバー」を利用する。
学習コストをかけずに簡易サーバーを用いて
「ブラウザからのGET要求/サーバーの応答」を実体験するところから始めても良いと思います。
「簡易サーバー」の一例：
- Chrome拡張タイプの Web Server for Chrome がお手軽でした。
スタティックなWebページの動作確認用になります
（ブラウザ側で HTML+CSS+JavaScriptを使うページの動作確認ができます）。
サーバー側プログラムは設置できません（Ajax利用は GET要求 に限られる）
- 任意のフォルダを http://localhost(:port)/ に設定・変更できる。
- サーバーの起動/終了が設定パネル等で簡単に行える。
- アンインストールはChrome拡張を削除する方式
というシンプルさが特徴です。
表示ページで使う JavaScript の動作確認程度には使えます。
追記）
エラーメッセージは英語ですので、翻訳してでも読みましょう。
Chrome で ES モジュール(export-import)を利用しようとしてエラーが発生しています。
file:プロトコルからアクセスするとオリジン は nullで扱われ、CORS ポリシーに反するのでブロックした。
と丁寧に指摘してくれています。
それどころか、サポートされる プロトコルスキームまで列挙して対策を示してくれています。
列挙された中のプロトコルの一つである http: でアクセスする方法として、
サーバーが必要であることから「簡易サーバー」について回答させていただきました。
投稿2019/12/08 17:55
編集2019/12/08 20:12
総合スコア5434
0
代替手段等あれば教えていただきたいです。
Firefoxで行う、というのが手っ取り早いです。
投稿2019/12/07 10:54
総合スコア145965
node.jsを組み込んだjavascriptファイルをつくるということでしょうか？
> node.jsを組み込んだjavascriptファイルをつくるということでしょうか？
いえ、コンパイルしたあとにはふつうにブラウザで読めるJavaScriptファイルが出来上がります。Node.js本体が含まれることはありません。
.exeファイルをつくるんですね！ありがとうござします。
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/12/08 23:05 編集