1. ホーム
  2. jquery

[解決済み】CORS(cross-origin resource sharing)投稿リクエストを動作させる方法

2022-04-19 04:40:49

質問

私のローカル LAN にあるマシン(machineA)には、2つのウェブサーバーがあります。 1 つは XBMC に内蔵されているもので (ポート 8080)、私たちのライブラリを表示しています。 2つ目のサーバーはCherryPyのPythonスクリプト(ポート8081)で、オンデマンドでファイル変換を行うために使用しています。 ファイル変換は、XBMC サーバから提供されるページからの AJAX POST リクエストによって開始されます。

  • 後藤 http://machineA:8080 ライブラリが表示されます。
  • ライブラリが表示されます
  • ユーザーが'convert'リンクをクリックすると、次のコマンドが発行されます。

jQuery Ajaxリクエスト

$.post('http://machineA:8081', {file_url: 'asfd'}, function(d){console.log(d)})

  • ブラウザは、以下のヘッダを持つHTTP OPTIONSリクエストを発行します。

リクエストヘッダ - OPTIONS

Host: machineA:8081
User-Agent: ... Firefox/4.01
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Origin: http://machineA:8080
Access-Control-Request-Method: POST
Access-Control-Request-Headers: x-requested-with

  • サーバーは次のように応答する。

レスポンスヘッダー - OPTIONS (STATUS = 200 OK)

Content-Length: 0
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:40:29 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: text/html;charset=ISO-8859-1

  • その後、会話は停止します。 サーバーが正しい(?)CORS ヘッダー(Access-Control-Allow-Origin: *)で応答したため、ブラウザは理論上、POST リクエストを発行するはずです。

トラブルシューティングのために、同じ $.post コマンドを http://jquery.com . jquery.comからのpostリクエストは動作し、OPTIONSリクエストに続いてPOSTが送信されます。 このトランザクションからのヘッダーは次のとおりです。

リクエストヘッダ - OPTIONS

Host: machineA:8081
User-Agent: ... Firefox/4.01
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Origin: http://jquery.com
Access-Control-Request-Method: POST

レスポンスヘッダー - OPTIONS (STATUS = 200 OK)

Content-Length: 0
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:37:59 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: text/html;charset=ISO-8859-1

リクエストヘッダ - POST

Host: machineA:8081
User-Agent: ... Firefox/4.01
Accept: */*
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Keep-Alive: 115
Connection: keep-alive
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer: http://jquery.com/
Content-Length: 12
Origin: http://jquery.com
Pragma: no-cache
Cache-Control: no-cache

レスポンスヘッダー - POST (STATUS = 200 OK)

Content-Length: 32
Access-Control-Allow-Headers: *
Access-Control-Max-Age: 1728000
Server: CherryPy/3.2.0
Date: Thu, 21 Apr 2011 22:37:59 GMT
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Content-Type: application/json

同じリクエストが一方のサイトからはうまくいき、もう一方のサイトからはうまくいかないのはなぜなのかがわかりません。 どなたか、私が見落としているものを指摘していただけると幸いです。 あなたの助けをありがとうございます

解決方法は?

私は最終的にこのリンクに遭遇しました。 CORS POST リクエストはプレーンな javascript からは動作しますが、なぜ jQuery では動作しないのでしょうか? jQuery 1.5.1には、以下の機能が追加されています。

 Access-Control-Request-Headers: x-requested-with

ヘッダをすべての CORS リクエストに追加する必要があります。 また、同じ質問によると、サーバー応答ヘッダーの設定は

Access-Control-Allow-Headers: *

は、レスポンスの続行を許可しません。 レスポンスヘッダに必要なヘッダが含まれていることを確認する必要があります。

Access-Control-Allow-Headers: x-requested-with