2

AngularJSを使用していて、以下のコードでサーバサイドAPIのデリートを呼び出したのですが、デリートできずになぜかメソッドがOPTIONSになってしまいます。

$scope.delete = function(video){
    //delete
    Video.delete({id: video.id});
  };

GoogleのdevtoolのGeneralは以下のようになっています。

Remote Address:[::1]:9000
Request URL:http://localhost:9000/video/1
Request Method:OPTIONS
Status Code:404 Not Found

またRequest Headersは以下のようになっています。

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:ja,en-US;q=0.8,en;q=0.6
Access-Control-Request-Headers:accept
Access-Control-Request-Method:DELETE
Connection:keep-alive
Host:localhost:9000
Origin:http://localhost:8000
Referer:http://localhost:8000/

Request HeadersではメソッドはDELETEなのに、GeneralではOPTIONSになっています。
また、AngularJSを使わないでDELETEした場合は正常に削除されていたので、サーバーサイドには問題はないと考えています。

同様の問題がPOST時にも起きてそのときはconfigに以下のコードを追加し問題はなおりましたが、DELETEの場合どう直せばいいのかわかりません。もしわかればご教授いただけるとありがたいです。

$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;application/json;charset=utf-8';

1 件の回答 1

1

ポート番号が 8000 と 9000 で異なっているので、 Cross-Origin Resource Sharing (以下CORS) として扱われています。ブラウザは CORS を検出した場合、実際のメソッドを投げる前に、 OPTIONS メソッドによる検査(プリフライト/preflight)を実行します。

参考: HTTP access control (CORS) - MDN

上記のページにプリフライトの詳細がありますが、この問題への対応方法は以下のようにいくつか考えられます。いずれにせよ、この質問のケースではクライアント側の AngularJS の修正だけで済む方法は存在しません。

  1. サーバサイドAPIに OPTIONS メソッドを実装する
  2. サーバサイドAPIをHTMLと同じポート 8000 番で提供する

サーバ側の修正方法については、現時点では情報が少ないため、提案を差し控えます。


なお POST がその方法で修正可能だったのは、ブラウザの以下の動作によるものです。

GET または POST 以外のメソッドを使用します。また application/x-www-form-urlencoded、multipart/form-data、または text/plain 以外の Content-Type とともに POST を行う場合、例えば application/xml または text/xml を用いて XML のペイロードをサーバーへ送るために POST を用いるような場合は、リクエストでプリフライトを行います。

(同前:プリフライトリクエスト より引用)

3
  • 回答ありがとうございます。もう少し質問してもよろしいでしょうか 1番の解決方法について、OPTIONSメソッドにはどのような処理をすればいいのでしょうか。調べてみたところ、どのメソッドが使用できるかを確認するためにOPTIONSメソッドは存在しているとわかりました。ということは、ヘッダーにAccess-Control-Allow-Methodsを実装し、それを返すという理解でいいのでしょうか。DELETEでは上のヘッダとAccess-Control-Allow-Origin: *を実装しています。 2番について、サーバーサイドのサーバとクライアントサイドのサーバで同じポートをリッスンするにはどうしたらいいのでしょうか。試しに同じポートでサーバを立ち上げてみたところ、listen tcp :8000: bind: address already in useとでてできません。もしよろしければ以上2点について教えていただけると幸いです。 Commented 2015年7月25日 5:57
  • 1
    今、OPTIONSを実装しましてヘッダとしてAccess-Control-Allow-Origin, Access-Control-Allow-Methodsを付与したところ、デリートできました! ようするに、GETとPOST以外のメソッドを実装する場合はOPTIONSでそれらが使用できるということをクライント側に教えてやる必要があるという理解で正しいのでしょうか。 回答ありがとうございました。 Commented 2015年7月25日 6:15
  • その理解であっています。まぁ、本番運用では適切にアクセス制御してあげるべきでしょうが、テストならば両方共 * で良いでしょう。 2番については、2つのサーバを混ぜてパスで動作をそれぞれに振り分けるみたいなことをするわけですが、フロントにHTTPサーバ挟んでパスでリバースプロキシを切り替えるくらいが簡単かもしれません。
    – KoRoN
    Commented 2015年7月25日 9:07

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。