[解決済み] ローカルリソースのロードが許可されていない

質問

エクスプレスアプリでhtmlページとjavascriptファイルをリンクさせようとすると、デベロッパーツールで上記のようなエラーが発生します。 私のローカルマシンでhbsレンダリングエンジンを搭載したexpressアプリで実行しています。 コードスニペットは次のようなものです。

html

<script type="text/javascript" src="file:///public/javascripts/jquery/jquery-2.2.4.min.js"></script>
<script type="/javascript" src="file:///public/javascripts/receiver.js"></script>
<script type="text/javascript" src="file:///public\javascripts\jquery-2.2.4.min.map"></script>

これはapp.jsのビューエンジンを設定する部分です。

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'hbs');

で、デベロッパーツールを確認すると、このようなコンソールエラーが表示されます。

ローカルリソースのロードが許可されていません: file:///public/javascripts/jquery/jquery-2.2.4.js (インデックス) :1 ローカルリソースのロードが許可されていません: file:///public/javascripts/receiver.js (インデックス) :1 ローカルリソースのロードが許可されていない：file:///public/javascripts/jquery-2.2.4.min.map

なぜプログラムは私のjavascriptsにアクセスしないのですか？

どうすればいいですか？

まず

を持つファイルを読み込まないでください。 file:// . 相対パスで入力してください。 scriptタグでjavascriptのソースマップを読み込まないでください。 この行をjavascriptファイルの先頭に追加してください。 //# sourceMappingURL=/path/to/script.js.map

2つ目

Expressアプリにこんな小さなコードがありますね。 app.use(express.static('public')); . ない場合は、追加してください。 サーバーは公開パスを知っています。そのため、以下のように書く必要はありません。 public/

これがあなたの構造なら

• server.js
• public/
  • index.html
  • javascripts/
  • レシーバ.js
  • jquery/
    • jquery-2.2.4.min.js

これをhtmlやhandlebarsのファイルに書き込んでください。

<script type="text/javascript" src="javascripts/jquery/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="javascripts/receiver.js"></script>