web-dev-qa-db-ja.com

XMLHttpRequestで「Access-Control-Allow-Origin」エラーが発生しない

JQuery $.ajax関数を使用してこの問題を解決できたはずですが、この場合、jQueryはオプションではありません。代わりに、CORSリクエストを使用します。リクエストに応答しているウェブサーバーに何か問題があると感じており、問題が何かを理解するのに苦労しています。

ここにCORSリクエストを作成するための私のコードがあります

var httpRequest = new XMLHttpRequest();
httpRequest.open('POST', url, true);
httpRequest.setRequestHeader( 'Access-Control-Allow-Origin', '*');
httpRequest.setRequestHeader( 'Content-Type', 'application/json' );
httpRequest.onerror = function(XMLHttpRequest, textStatus, errorThrown) {
  console.log( 'The data failed to load :(' );
  console.log(JSON.stringify(XMLHttpRequest));
};
httpRequest.onload = function() {
  console.log('SUCCESS!');
}

Console.logエラーは次のとおりです。

XMLHttpRequestはロードできません http://test.testhost.com/testpage 。要求ヘッダーフィールドAccess-Control-Allow-Originは、Access-Control-Allow-Headersでは許可されていません。

ヘッダー情報は次のとおりです。

> Remote Address:**.**.***.**:80 Request
> URL:http://test.testdomain.com/testpage Request
> Request Method:OPTIONS
> Status Code:200 OK

リクエストヘッダー：

OPTIONS /content-network HTTP/1.1
Host: test.testhost.com
Connection: keep-alive
Cache-Control: no-cache
Pragma: no-cache
Access-Control-Request-Method: POST
Origin: http://test.testdomain.com
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36
Access-Control-Request-Headers: access-control-allow-Origin, content-type
Accept: */*
Referer: http://test.testdomain.com/
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8

応答ヘッダー：

HTTP/1.1 200 OK
Date: Thu, 14 Aug 2014 20:17:25 GMT
Server: Apache
Last-Modified: Thu, 14 Aug 2014 20:17:25 +0000
Cache-Control: no-cache, must-revalidate, post-check=0, pre-check=0
ETag: "1408047445"
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type
Vary: Accept-Encoding
Content-Encoding: gzip
Access-Control-Allow-Headers: Origin, x-requested-with, content-type
Access-Control-Allow-Methods: PUT, GET, POST, DELETE, OPTIONS
Content-Length: 6117
Connection: close
Content-Type: text/html; charset=utf-8
javascriptxmlhttprequestcorsresponse
13
CR47

サーバーの応答により、要求に3つの特定の 非単純ヘッダー を含めることができます。

Access-Control-Allow-Headers:Origin, x-requested-with, content-type

ただし、リクエストにはサーバーの応答で許可されていないヘッダーがあります。

Access-Control-Request-Headers:access-control-allow-Origin, content-type

CORS要求で送信されるすべての非単純ヘッダーは、Access-Control-Allow-Headers応答ヘッダーで明示的に許可する必要があります。リクエストで送信された不要なAccess-Control-Allow-Originヘッダーは、サーバーのCORSレスポンスでは許可されていません。これは、「... Access-Control-Allow-Headersで許可されていません」エラーメッセージが伝えようとしていたものです。

リクエストにこのヘッダーがある理由はありません。Access-Control-Allow-Originはリクエストヘッダーではなくresponseヘッダーであるため、何もしません。

Solution：Access-Control-Allow-Originヘッダーをリクエストに追加するsetRequestHeader呼び出しを削除します。

14
apsillers

削除：

httpRequest.setRequestHeader( 'Access-Control-Allow-Origin', '*');

...そして追加：

httpRequest.withCredentials = false;
3
Max

CORSの問題に加えて、アクセスしようとしているサーバーでは HTTP基本認証 が有効になっています。 XHRに渡すURLで資格情報を指定することにより、クロスドメインリクエストに資格情報を含めることができます。

url = 'http://username:[email protected]/testpage'
0
Mark Ignacio