1. ホーム
  2. javascript

[解決済み】JS ファイルが net::ERR_ABORTED 404 (Not Found) を取得する)

2022-01-31 01:24:57

質問事項

簡単なIo-web-chatを作ろうとしています。 最近 <script> htmlファイルから外部jsファイルへ。

これは私の非常にシンプルなフォルダ構造です。

Chat
|-- index.html
|-- index.js
`-- server.js

htmlファイルの該当箇所。

<script src="/socket.io/socket.io.js"></script>
<script src="https://code.jquery.com/jquery-1.11.1.js"></script>
<script src="index.js"></script>
</body>
</html>

index.jsファイルの該当箇所です。

$(function() {

  //Initialize variables
  var $messageArea = $('#messages');
  var $InputMessage = $('#InputMessage');
  var $InputName = $('#InputName');

  //Initialize Socket
  var socket = io();

  //Send server Your message
  socket.emit('chat message', $InputMessage.val());

});

server.jsファイルの該当箇所です。

app.get('/', function(req, res){
  res.sendFile(__dirname + '/index.html');
});

また、socket.io のサンプルにあるような public 型の構造体にファイルを置いてみました。

Chat
|-- Public
|   |-- index.html
|   `-- index.js
`-- server.js

を変更しました。 src="/index.js" htmlの 追加 /public/index.html をserver.jsファイルに追加しました。 しかし、うまくいきません。

これはすべてlocalhostで実行されています。 私はここで何を間違えているのでしょうか?

解決方法は?

コメントにもあるように、静的ファイルをクライアントに送信する方法が必要です。これは、Nginx のようなリバースプロキシで実現できますし、単純に express.static() .

静的ファイル(CSS、JS、画像)は、静的ファイル専用のフォルダに置きます。これを static を例にしています。完了したら、サーバーコードに次の行を追加してください。

app.use("/static", express.static('./static/'));

これは、/staticルートを通して、あなたの"static"フォルダーのすべてのファイルを効果的に提供します。

このように、クライアントでindex.jsファイルを問い合わせることは、次のようになります。

<script src="static/index.js"></script>