Ajax通信　POSTでのエラー405の解決法

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

現在、以下の動画で学習をしています。
https://www.youtube.com/watch?v=5nL7X1UMWsc&list=PLoYCgNOIyGABdI2V8I_SWo22tFpgh2s6_&index=8
動画の5:20秒付近の操作です。

同じ環境を構築し、私の方で同じことを実施すると405エラーが発生してしまいます。

jquery-3.0.0.min.js:4 POST http://127.0.0.1:5500/api/orders.json 405 (Method Not Allowed)

HTMLファイル

<!DOCTYPE html> <html lang="ja"> <head> <title></title> <link rel="stylesheet" href="style.css"> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

</head>
<body>
	<h1>jQuery　Ajax Tutorial</h1>

	<h2>Cofee Orders</h2>
	<ul id="orders">
		
	</ul>

	<h4>Add a Cofee Order</h4>
	<p>name: <input type="text" id="name"></p>
	<p>drink: <input type="text" id="drink"></p>
	<button id="add-order">Add!</button>
	

	<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>

	<script src="main.js">
			
	</script>

</body>

</html>

main.jsファイル
$(function(){

var $orders = $('#orders');
var $name = $('#name');
var $drink = $('#drink');

$.ajax({
    type:'GET',
    url:'/api/orders.json',
    success:function(orders) {
        $.each(orders,function(i,order){
            $orders.append('<li>name: '+ order.name +', drink:'+order.drink +'</li>');
        });
    },
    error: function() {
        alert('error loading orders');
    }
});

$('#add-order').on('click', function(){

    var order = {
        name: $name.val(),
        drink: $drink.val(),
    };

    $.ajax({
        type: 'POST',
        url:'/api/orders.json',
        data:order,
        success: function(neworder){
            $orders.append('<li>name: '+ neworder.name +', drink:'+neworder.drink +'</li>');
        },
        error: function() {
            alert('error saving order');
        }
    });
});

});

orders.json
[
{
"id":1,
"name":"will",
"drink":"Americano w/Cream"
},
{
"id":2,
"name":"Laura",
"drink":"Vanilla Macchiato"
}
]

エラーの原因は、使用しているjQueryのCDN内にあるのかなと思っているのですが、初学者なので、これ以上のことがわからずに困っております。
また、動画はとても古いものですが、現在お世話になっている学習コミュニティでは、jQueryの基本的な理解のためにこの動画で勉強するように指導されているので、古い情報らしですが、初学者としてはその方針に従わざるを得ない状況です。
また、この動画では、Ajax通信の部分は、この学習環境を構築する情報が与えられていたようなのですが、現在リンク切れで見れない状況です。私は、動画を見ながらいろいろ調べながらこの環境をなんとか構築しました。作成したjsonファイルからの情報の取得(GET）はできたのですが、POSTで情報を送るところで、405エラーが発生し、学習が継続できなくなっております。

また、動画と同じバージョンのjQueryファイルをダウンロードして使用するタイプのものを、読み込ませて行ってみましたが同様に405エラーが発生しました。

このエラーはどのように解決したら良いでしょうか？

お力をおかしいただけますと大変助かります。
よろしくお願いいたします。

hoshi-takanori

2021/03/28 13:34

えっと、サーバーはどうやって動かしてますか？ポート 5500 ってことは VSCode の Liver Server でしょうか？

yuiran

2021/03/29 00:59

おっしゃるとおり、VsCodeの　LiveServerです。

hoshi-takanori

2021/03/29 01:14

そいつは POST には対応してませんので、ちゃんとしたサーバーを立てる必要があります。

yuiran

2021/03/29 01:16

おお！そうだったのですね。ありがとうございます。では、MANPなどを使った環境だとうまくいくのでしょうか？

hoshi-takanori

2021/03/29 01:21

はい、MAMP でも単体の PHP などでも構いませんが、「POST に対応する」ということは、受け取ったデータを保存するとか検索するとかの処理を、ご自分で記述する必要があります。動画では localhost:3000 に繋いでるので、node.js か何かで書いたものを動かしてると思います。おそらくリンク切れの資料にその辺のことが書いてあったのでしょう。いずれにせよ、ここにいる赤の他人ではなく、「お世話になっている学習コミュニティ」に相談すべきかと。

yuiran

2021/03/29 01:26

とても詳しく教えていただき本当にありがとうございます。頂いた情報を元に調べてやってみます。「お世話になっている学習コミュニティ」へ、相談したいのですが、あまり質問に対する解答について機能していないらしく、また、あまりに初心者質問だと、勉強が足りないと言う回答であまり答えていただけないのです… また、今回のリンク切れについても、連絡しているのですが、まったく回答が来ず…という状況なのです… こちらに相談して、きちんと助けて頂いて本当に助かっております。ありがとうございます！

hoshi-takanori

2021/03/29 02:27

自分が書いたのは全然詳しくない一般論です。というのも、「お世話になっている学習コミュニティ」があると言われてしまうと、そのコミュニティの方針に反することは書いちゃいけないと思って一般論しか書けなくなるので…。なので、そのコミュニティがどういうもので、どういう目的や目標を持って学習されてるのかを書いてくれたらもうちょっと具体的なアドバイスができるかも知れません。(約束はできませんが。)

yuiran

2021/03/29 13:26

了解です。いろいろと、深く気にしていただいているようでとても嬉しく思います。暖かいお心遣いに泣きそうです… 技術的な質問の周りの部分についても、気にかけていただく形になってしまい申し訳ないという気持ちと、心からありがたいという気持ちでいっぱいです。本当にありがとうございます。「お世話になっている学習コミュニティ」では、わからないことがあれば、何度でも質問できて、相談できる、というサービスで販売されており、それを信じて購入したのですが、実際に入ってみると、むやみやたらに質問するのは良くないという考え方を伝えられます… コミュニティオーナーが言うところのむやみやたらにと言うのは、自分本位での質問をしてはいけないということです。つまり、質問した背景などを書かずに質問する感じです。質問としての情報が足りない状態での質問という意味だと思います。こちらでは質問する際に、どのように質問するのか、回答する方の身になって情報提供をしながら質問をする形になっているので、この方法でしたら、私が入っているコミュニティでも質問OKなのですが、実際は、同じように質問をしても、回答者の方が答えられるけれど、質問者が勉強不足だから、答えたくない（という雰囲気ではぐらかされる）となったり、結局、納得の行くアドバイスを得ることができない状況なのです。また、回答を得られるまで何日も経過し、時間的なロスも大きくそれが大きなストレスになっています… また、今回のように、学習コンテンツとして、動画を紹介されていますが、それが古すぎて、学習環境が構築できなくなっていることについても相談しましたが、権限を持っている方から回答が得られなくなっており、同じ学習コンテンツで、数年前にコミュニティに入った方は、すんなり学習できていたことが、最近入った人はできなくなっており、その学習環境も自力で解決構築しなければならない状況になっている、という状況です。コニュニティの方針としては、わからないことがあれば何度でも質問OKとして、しっかりサポートするという方針ですが、現実問題としてそれが叶えられていない状況なので、泣く泣く、こちらに相談させていただいたという次第です。なにより、提供している学習コンテンツやサービス内容についてさえ、気軽に対話できないのが心苦しいのです。運営者の方が、とても力のある方で多忙なのだとは思いますが、提供しているサービスと提供しているコンセプトについては責任を持ってほしいと思うのですが、力がある方に意見をして、変なことになるのも心配と思い、本当に感じていることを伝えづらいなと思っているのです… そして、質問に対しての回答があり、それに対して、こちらでメッセージを送っても、それに対しては現時点で必ずといっていいほど、回答が来ません。一度のみの回答で、対話ができないのです… せっかく、この方のプログラミングセンス、人間性など、リスペクトして購入したのになぁと残念に思っているのです…

hoshi-takanori

2021/03/29 15:51

うーん、それは酷いですね。少なくとも今回の件 (AJAX を動かすためのサーバー環境構築) に関しては教材の不備であり、それでお金を取るなんて…。とりあえず今回のコードが動くところまではサポートしようと思いますが、その前に状況を確認させてください。・お使いの OS や開発環境は？・サーバーサイドの言語は何がいいですか？・Web API とか JSON って何のことか分かりますか？

yuiran

2021/03/30 13:34

お返事が遅くなってしまい申し訳ありませんでした。コードが動くまでサポートをいただけるとのこと、本当にありがとうございます！とても嬉しいです！実はあのあと、コミュニティで今回の動画の代わりになるコースが紹介され、node,jsをインストールする、ということはできたのですが、その後、黒い画面（Comand　prompt？）にて、何やらコードを書き込んでおり、その黒い画面を立ち上げる部分が動画では割愛され、さらに、windows環境での構築だったため、(c:＼windows…）ここもmacユーザーの私にはブラックボックスとなってしまいました… https://www.youtube.com/watch?v=eR3rcalj06Q&list=PLillGF-RfqbYJVXBgZ_nA7FTAAEpp_IAc&index=5 の1:20秒辺りから先のところです。 nodejsをインストールした、あとからの工程について、教えていただけますと大変助かります。そこを構築したら、こちらで最初に質問させていただいた動画での学習も継続できるかなと思っておりあます。・私が使っているOSは、mac os 10.15.7 Catalinaです。・サーバサイドの言語は、PHPでしたら、jQueryの前に勉強していたので、わかりやすいかと思います。・Web APIはこちらのページで一通り把握しました。 https://www.ashisuto.co.jp/eai_blog/article/201712_eai_webapi.html ・Jsonについてはこちらのページで一通り把握しました。 https://products.sint.co.jp/topsic/blog/json 本当に、大変親切で暖かいお申し出に心から感謝しております。どうぞ、よろしくお願いいたします。

hoshi-takanori

2021/03/30 23:07

動画を確認してみましたが、元の動画では POST したデータを JSON にして返してるだけで、新しい動画でも id を付けて JSON にして返してるだけのようですね。サーバー側では大したことをしてなくて、ブラウザ上で処理しても大差ないので、これだけでは何も分からない気がしますね…。あと、新しい動画では node.js は単に live-server を動かしてるだけで、特に POST の処理はしてない (POST の処理は JSON Placeholder という、適当なサンプルデータを返すサイトを使ってます) ので、VSCode の Live Server を使ってそのまま動かせるとは思います。とりあえず質問文のコードを PHP で動かすための方法を回答欄に書いておきますが、教わる先を考え直した方がいいんじゃないかという気がしないでもないです。あと、一つお願いなんですが、teratail の質問文にコードを貼る時は、markdown の code タグ (```) で囲んでくれると見やすくなるので助かります。 https://apuridasuo.hatenablog.com/entry/2019/10/20/220308#%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%B3%E3%83%BC%E3%83%89%E3%82%92%E8%B2%BC%E3%82%8B%E3%81%A8%E3%81%8D%E3%81%AF%E3%82%BF%E3%82%B0%E3%81%A7%E5%9B%B2%E3%82%80

yuiran

2021/03/31 13:52

ありがとうございます！ markdownについても教えていただき本当にありがとうございます。頂いた情報を元にphpファイルを作って、その状態で、最初の動画のajax通信ができるか、検証してみます。取り急ぎお礼まで。明日ご報告します。

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

回答3件

POSTで情報を送るところで、405エラーが発生

状況がわかりませんがサーバー側でjsonに対するpostがエラーになるような
設定になっているのでは？
jsonファイルはスタティックなデータですよね？postする意味はないと思います

投稿2021/03/29 00:39

yambejp

総合スコア116694

yuiran

2021/03/29 01:05

動画を5:20以降見続けてい行きますと、jsonファイルは、POSTで送られたデータが書き込まれているようです。今のこのあたりの技術の観点だとpostする意味はないとお思いになるのかもしれませんが、動画通りに学習を進めて理解を深めたいと思っていますので、このpostでのエラーを解決する方法をご教授いいただけますと大変助かります。よろしくお願いいたします。

yambejp

2021/03/29 04:50

> type: 'POST', > url:'/api/orders.json', と例示されている通り、どうみても読み込み先はただのファイルですムービーは/api/orders宛に送ってますので根本的にやっていることが違います

yuiran

2021/03/29 13:34

アドバイスをありがとうございます。そこなんですよ… 本来でしたら、この動画での学習用に環境構築の方法について知らせるリンクが有るのですが、それが機能していないため、動画を見ながら、手探りの状態で同じ環境を構築しているのです。その結果、同じようにしたと思っていても、やはり違うことをしているという結果になっており、今回のエラーもそうして発生していると思うのです。＞ムービーは/api/orders宛に送ってますので ↑をどのように作れば良いのかわからなくて困っています。もし、動画を見て、おわかりになる場合は、教えていただきますと大変助かります。どうぞ、よろしくお願いいたします。

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

自己解決

お世話になっております。
とりあえず、表題のエラーは以下の方法で表示されなくなりました。
新たなエラーが起こったのですがそれはまた別件で相談させていただこうと思います。

以下の方法で途中まで環境構築をできることがわかったのでそれをこちらに共有させていただきます。

以下の動画の環境構築をする。

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

私が行った環境構築の方法
Nodejsでローカルサーバー環境を構築して、port3000で実行すると、jQueryの動作ができそうだという考えに至った。

その環境構築で重要な事を言っている動画がこれ
Mac版
https://www.youtube.com/watch?v=uMPW_5jckOY
こちらは、ライブサーバーを立ち上げるところまで
windows版
https://www.youtube.com/watch?v=VShtPwEkDD0

立ち上げたライブサーバーで、自分が作ったHTMLファイルを表示できるところまで。

まず、mac版の動画から、nodejsを以下サイトからダウンロードしてインストール
https://nodejs.org/en/
14.16.0.LTSをダウンロードしてインストール
（このバージョンは常に変化するので、上記サイトの左側の〜LTSのものをダウンロードする。
インストール場所をメモっておく。
インストール後は　ターミナル　を立ち上げ（Launch padから検索で立ち上げるなど）
node -v　と入力、nodeのあとは、英数字での半角スペース、vは小文字で入力する。
ターミナルを立ち上げ、nodeとnpmのインストールが確認できたら、[cd ]とcdの後に半角スペースと入力し、デスクトップにある、Ajax and API studyのフォルダをターミナルにドラッグする。
すると、cd の後に以下がタイプされる。
/Users/それぞれのユーザー名/Desktop/Ajax\ and\ API\ study
それぞれのユーザーのPC名:Ajax and API study makiko$
上記の$の後にスペースで、node server.jsを入力、リターンを押す。
そして、ブラウザのURL入力欄に、ターミナルに出力された
Server running at 以下のURLを入力リターンを押すとサイトが表示される。

投稿2021/04/24 03:31

yuiran

総合スコア15

PHP のドキュメントルートに以下のディレクトリ構造でファイルを配置したら動くとは思います。

.
├── api
│   ├── orders.json
│   └── orders.php
├── index.html
└── main.js

なお、PHP のコードを動かすには拡張子を .php にする必要があるので、main.js の POST 先の URL も変更が必要になります。

js
1$.ajax({
2type: 'POST',
3url:'/api/orders.php', // <- 拡張子を .json から .php に変更
4data:order,

orders.php は例えばこんな感じ。(そのままだと受け取った値をそのまま返すだけでつまらないので、$name や $drink の中身に変更を加えてみるのも良いでしょう。)

php
1<?php
2
3$name = $_POST['name'];
4$drink = $_POST['drink'];
5
6$data = array('name' => $name, 'drink' => $drink);
7
8header('Content-Type: application/json');
9echo json_encode($data);

投稿2021/03/30 23:13

hoshi-takanori

総合スコア7899

yuiran

2021/04/01 13:58

こちらのご提案をありがとうございました！ご提案いただいたとおりに、やってみたのですが、jQueryのCDNが絡んだエラーが起きてしまいまして私が上記ご提案のための環境整備ができていないからだと思います。自分でも、もう一度HTMLのこのコードに必要な環境設定等見直して、頑張ってみます。合わせて、基本的には最初のjQueryのAjax通信ができるようになることが目的なので、その環境構築をnodejsを使って行う方も、いろいろ調べてやってみようと思います。

hoshi-takanori

2021/04/01 17:59

jQuery はこちらでは動いてますけど、問題が発生するなら jquery-3.0.0.min.js をダウンロードしてローカルに配置すれば良いかと。

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

あなたの回答