web-dev-qa-db-ja.com

CORSリクエストはChrome=で失敗します

簡単なCORSリクエストを、認証にセッションキーを使用する外部アプリケーションサーバーに送信しようとしています。

$.ajax({
    type: "GET",
    url: "https://192.168.1.72:8442/api/file/",
    headers: {"Authorization": "3238562439e44fcab4036a24a1e6b0fb"}
});

Firefox 18、Opera 12.12、Rekonq 2.0（WebKitも使用）では正常に機能しますが、Googleでは機能しませんChrome（バージョン21および24で試してみました）） 。GoogleでChromeは、OPTIONSリソースがNetwork Inspectorで読み込めず、アプリケーションサーバーがリクエストを取得しないことを示しています。jQuery1.8.3および1.9.0を試しました。

Request URL:https://192.168.1.72:8442/api/file/
Request Headers
Access-Control-Request-Headers:accept, authorization, Origin
Access-Control-Request-Method:GET
Cache-Control:no-cache
Origin:https://192.168.1.72:8480
Pragma:no-cache

リクエストからヘッダーを削除すると、Googleでも401が返されますChromeで、アプリケーションサーバーで認証が無効になっている場合、リソースにアクセスできます。どのヘッダーが送信されるかは問題ではありません。送信できるヘッダーは{"Content-Type"： "plain/text"}のみです。他のすべてのヘッダー名/値は、Google Chromeでエラーになりますが、すべてのブラウザーで機能します私は上で述べました。

Google ChromeがCORSリクエストのヘッダーを処理しないのはなぜですか？

jqueryajaxgoogle-chromehttp-headerscors
14
Karmo Rosental

これはGoogle Chromeのバグです： http://code.google.com/p/chromium/issues/detail?id=96007 。

16
Karmo Rosental

私のAPIサーバーで自己署名証明書を使用していますが、それが問題のようです。 Googleを起動した場合、Chrome with --disable-web-securityオプションを使用すると、リクエストヘッダー付きのCORSが機能します。--disable-web-securityがなければ、CORSリクエストを自己署名APIサーバーに送信できますが、ヘッダーを追加できません（ Content-Typeを除く）。

3
Karmo Rosental

Access-Control-Allow-Headers：*は、「OPTIONS」リクエストに対してのみ設定する必要があることがわかりました。 POSTリクエストに対してそれを返す場合、ブラウザはリクエストをキャンセルします（少なくともchromeの場合）

次のPHPコードは私のために働きます

// Allow CORS
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Credentials: true');    
header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); 

// Access-Control headers are received during OPTIONS requests
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
  header("Access-Control-Allow-Headers: *");
}

私はいくつかの誤解を招く応答で同様の質問を見つけました：-サーバースレッドはこれがクロムの2年間のバグであると言います：Access-Control-Allow-Headersはlocalhostと一致しません。それは間違っています：Postを使用してローカルサーバーにCORSを通常どおり使用できます-Access-Control-Allow-Headersはワイルドカードを受け入れます。それも間違っています、ワイルドカードは私にとってはうまくいきます（私はChromeでのみテストしました）

この問題を理解するのに半日かかります。

ハッピーコーディング

3
greensuisse

サーバー側：サーバーはヘッダー「Access-Control-Allow-Credentials」を設定し、許可されたヘッダーを「Access-Control-Allow-ヘッダー」。

クライアント側：Authヘッダーを明示的に渡す代わりに、$。ajax（）でxhrFieldsを設定できます。

xhrFields: {
    withCredentials: true 
}

詳細 こちら 。

1
Varunkumar Nagarajan