[解決済み】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>
関連
-
[解決済み】JavaScriptで':'(コロン)は何をするのか?
-
[解決済み】jquery $.ajaxオブジェクトのresponseJSONプロパティを取得する方法 [重複]。
-
[解決済み】「Uncaught TypeError: Chromeで "Illegal invocation "が発生する。
-
[解決済み] エラー。モジュールhtmlが見つからない
-
[解決済み】React.jsの配列の子要素のユニークキーを理解する
-
[解決済み】 Uncaught Reference Error: stLight is not defined (in Chrome only)
-
[解決済み】JavaScriptで関数が存在するかどうかを確認する方法は?
-
[解決済み】Javascript、[オブジェクトHTMLInputElement]を表示中。]
-
[解決済み】中央値の計算 - javascript
-
[解決済み] jQuery の jquery-1.10.2.min.map が 404 (Not Found) を誘発する。
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み】 Uncaught TypeError: data.push is not a function
-
[解決済み】React Js: Uncaught (in promise) SyntaxError: 位置 0 の JSON で予期しないトークン < が発生しました。
-
[解決済み】Failed to load resource: net::ERR_FILE_NOT_FOUND loading json.js
-
[解決済み】BootstrapのCollapseが折りたたまれない
-
[解決済み】WebpackとBabelで「このファイルタイプを扱うには適切なローダーが必要な場合があります。
-
[解決済み】Reactのeslintエラーはpropsの検証で見つからない
-
[解決済み】 Uncaught Error: Invariant Violation: 解決済み】 Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object.
-
[解決済み】Redux TypeError: 未定義のプロパティ 'apply' を読み取れない
-
[解決済み】TypeError: AngularJSで未定義のプロパティ'get'を読み取れない
-
[解決済み】ETIMEDOUTエラーの対処方法は?