1. ホーム
  2. javascript

[解決済み] CORSとAccess-Control-Allow-Headersはどのように機能するのですか?

2022-03-13 05:14:42

質問

domain.com から a.domain.com に CORS リクエスト POST を作成しようとしています。

私のjavascriptは次のようなものです。

$('#fileupload').fileupload({
  xhrFields: {
    withCredentials: true
  },
  dataType: 'json',
  url: $('#fileupload').data('path'),
  singleFileUploads: true,
  add: function(e, data){
    data.submit();
  }
});

最初、OPTIONSルートがこのように呼ばれているのが見えます。

Request URL: https://a.domain.com/some/route
Request Method:OPTIONS
Status Code:200 OK

オプションのリクエストです。

Access-Control-Request-Headers:origin, content-type, accept
Access-Control-Request-Method:POST
Host:a.domain.com
Origin:http://domain.com:3000
Referer:http://domain.com:3000/home

オプションレスポンス

Access-Control-Allow-Credentials:true
Access-Control-Allow-Methods:POST
Access-Control-Allow-Origin:http://domain.com:3000
Connection:keep-alive
Content-Length:0
Content-Type:text/html;charset=utf-8

そのリクエストは、前述のように200で戻ってきます。私のサーバーでは、同じルートに POST メソッドの後に返されるのは、このようなものです。 OPTIONS

Request URL:https://a.domain.com/some/route

POST REQUEST

Content-Type:multipart/form-data; boundary=----WebKitFormBoundaryjwr5Pk7WBcfzMdbO
Origin:http://domain.com:3000
Referer:http://domain.com:3000/home

と、その POST のリクエストはキャンセルされ、失敗します。

質問ですが、POSTコントローラにもaccess-control-allow-originを設定する必要があるのでしょうか?

私は、認証用のクッキーでドメインが .domain.com このクッキーは、リクエストの中で一度だけ送信されましたが、今は送信されていません。なぜこのようなことが起こるのか、何か心当たりはありますか?

どうすればいいですか?

はい、ヘッダーが必要です。 Access-Control-Allow-Origin: http://domain.com:3000 または Access-Control-Allow-Origin: * を OPTIONS レスポンスと POST レスポンスの両方で使用します。ヘッダを含める必要があります。 Access-Control-Allow-Credentials: true をPOSTレスポンスに追加することもできます。

OPTIONSレスポンスには、ヘッダも含める必要があります。 Access-Control-Allow-Headers: origin, content-type, accept をリクエストされたヘッダーと一致させる。