MINE typeが違うエラー　「リソースはスタイルシートとして解釈されていますが、MIMEタイプはtext/htmlで転送されています。」

お世話になっております。

jQueryの勉強をしていて、こちらの動画と同じ環境を構築したいと思っております。

https://www.youtube.com/watch?v=fEYx8dQr_cQ&list=PLoYCgNOIyGABdI2V8I_SWo22tFpgh2s6_&index=8

こちらの学習サイトには、これを勉強するための環境構築の資料がアクセスできない状態になっており
自分で調べて、以下のように構築しました。

上記質問の自己解決に方法を記載しています。

ローカルサイトは立ち上がったのですが、検証のconsoleを見ると
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://127.0.0.1:3000/style.css".

というエラーが出ており、ブラウザの画面に表示させたいjsonファイルの内容も表示されていません。
また、最終的には、ブラウザに表示されているnameとdrinkに情報を入れ、addをクリックすることにより、ブラウザに表示され、jsonファイルへも書き込みが出いるようにしたいです。

コードは以下なのですが、私としては、server.jsの

res.setHeader('Content-Type', 'text/plain');

に問題があるように思うのですが、これをどのように変更すれば、エラーメッセージが出ずに全体的に解決できるのかわからずに困っています。
もしかしたら別の部分が原因かもしれません。

お知恵をお貸しいただけますと幸いです。

よろしくお願いいたします。

HTML
1<!DOCTYPE html>
2<html lang="ja">
3	<head>
4		<title></title>
5		<link rel="stylesheet" href="style.css">
6		<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
7
8		
9	</head>
10	<body>
11		<h1>jQuery　Ajax Tutorial</h1>
12
13		<h2>Cofee Orders</h2>
14		<ul id="orders">
15			
16		</ul>
17
18		<h4>Add a Cofee Order</h4>
19		<p>name: <input type="text" id="name"></p>
20		<p>drink: <input type="text" id="drink"></p>
21		<button id="add-order">Add!</button>
22		
23
24		<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
25
26		<script src="main.js">
27				
28		</script>
29
30	</body>
31
32</html>

Js
1// server.js
2const http = require('http');
3
4const hostname = '127.0.0.1';
5const port = 3000;
6
7const server = http.createServer((req, res) => {
8  res.statusCode = 200;
9  res.setHeader('Content-Type', 'text/plain');
10  res.end('Hello World');
11});
12
13server.listen(port, hostname, () => {
14  console.log(`Server running at http://${hostname}:${port}/`);
15});

js
1// main.js
2$(function(){
3
4    var $orders = $('#orders');
5    var $name = $('#name');
6    var $drink = $('#drink');
7
8    $.ajax({
9        type:'GET',
10        url:'/api/orders.json',
11        success:function(orders) {
12            $.each(orders,function(i,order){
13                $orders.append('<li>name: '+ order.name +', drink:'+order.drink +'</li>');
14            });
15        },
16        error: function() {
17            alert('error loading orders');
18        }
19    });
20
21    $('#add-order').on('click', function(){
22
23        var order = {
24            name: $name.val(),
25            drink: $drink.val(),
26        };
27
28        $.ajax({
29            type: 'POST',
30            url:'/api/orders.json',
31            data:order,
32            success: function(neworder){
33                $orders.append('<li>name: '+ neworder.name +', drink:'+neworder.drink +'</li>');
34            },
35            error: function() {
36                alert('error saving order');
37            }
38        });
39    });
40});
41

css
1body{
2    padding: 50px;
3    font: 14px "Lucida Grande",Helvetica,Arial, sans-serif;
4}
5
6a {
7    color: #00B7FF;
8}
9
10ul {
11    padding: 0;
12}
13
14ul li {
15    list-style-type: none;
16    background: #efefef;
17    padding: 10px;
18    margin-bottom: 10px;
19}
20
21ul li .edit{
22    display: none;
23}
24
25ul li.edit .edit{
26    display: initial;
27}
28
29ul li.edit .noedit {
30    display: none;
31}

json
1[
2    {
3        "id":1,
4        "name":"will",
5        "drink":"Americano w/Cream"
6    },
7    {
8        "id":2,
9        "name":"Laura",
10        "drink":"Vanilla Macchiato"
11    }
12]

行動規範の内容に同意します

回答1件

jQuery 使いたいだけなら Node.js で自分でサーバ作る必要ないと思います。
Node.js 使うなら serve パッケージなどで静的ファイルを返すサーバを起動すればよいです。

serve を使うのなら

sh
1npm -g i serve
2cd [HTMLなどのあるフォルダ]
3serve -l 3000

投稿2021/04/24 04:13

lazex

総合スコア604

yuiran

2021/04/24 07:26

ありがとうございます。教えていただきましたコードをターミナルに入力すればいいのでしょうか？また、動画の講座に従ってやろうとしていることは、ブラウザにjsonファイルの情報を表示し、またブラウザから入力した情報をjsonファイルへ書き込むという動作なのですが、これも静的なのでしょうか？超初心者なので、そのあたりもかみくだいて説明いただけますと大変助かります。お手数をおかけしてしまい本当に申し訳ありません。よろしくお願いいたします。

lazex

2021/04/24 10:15

> コードをターミナルに入力すればいいのでしょうか？はい > ブラウザにjsonファイルの情報を表示し、またブラウザから入力した情報をjsonファイルへ書き込むという動作なのですが、これも静的なのでしょうか？書き込むというのがサーバ側の処理で、ローカルのファイル、もしくはデータベース上のデータとして保存するという意味なら動的なので Node.js でプログラムを書くことになると思います。 Node.js で書く場合ですが、現状は `res.end('Hello World');` で固定の文字列を返しているだけです。まずは、 HTML/CSS/JS のファイルを返すようにし、返すファイルの種類に応じて、 `res.setHeader('Content-Type', 'text/plain');` を書き換えます。 CSS なら `text/css` です。ただ、静的ファイルを返す部分は自作は面倒なのでフレームワークを入れたほうがよいかもしれません。

行動規範の内容に同意します