web-dev-qa-db-ja.com

http：// localhostがオリジンである場合の致命的なCORS

サーバー（nginx/node.js）に適切なヘッダーを設定しても、このCORSの問題に悩まされています。

Chromeネットワークペイン->応答ヘッダーに表示されます：

Access-Control-Allow-Origin:http://localhost

トリックを行う必要があります。

テストに使用するコードは次のとおりです。

var xhr = new XMLHttpRequest();
xhr.onload = function() {
   console.log('xhr loaded');
};
xhr.open('GET', 'http://stackoverflow.com/');
xhr.send();

私は得る

XMLHttpRequest cannot load http://stackoverflow.com/. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

サーバーの構成ではなく、クライアントスクリプトの問題だと思います...

javascripthtml5corsxmlhttprequestxmlhttprequest-level2
126
whadar

Chrome CORS要求のlocalhostをサポートしません （2010年以降の未解決のバグ）。

これを回避するには、lvh.me（localhostのように127.0.0.1を指す）のようなドメインを使用するか、--disable-web-securityフラグを使用してchromeを起動します（テストしていると仮定します）。

173
Beau

@Beauの回答によると、Chromeはlocalhost CORSリクエストをサポートしていません。この方向に変更はほとんどありません。

Allow-Control-Allow-Origin：* Chrome Extension を使用してこの問題を回避します。拡張機能は、CORSに必要なHTTPヘッダーを追加します。

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: "GET, PUT, POST, DELETE, HEAD, OPTIONS"
Access-Control-Expose-Headers: <you can add values here>

ソースコードはGithubで公開されています 。

拡張機能はデフォルトですべてのURLをフィルタリングすることに注意してください。これにより、一部のWebサイトが壊れる場合があります（例：Dropbox）。次のURLフィルターを使用してlocalhostURLのみをフィルターするように変更しました

*://localhost:*/*
39
Hanxue

本当の問題は、すべてのリクエスト（OPTIONS＆POST）に-Allow-を設定すると、Chromeがキャンセルすることです。次のコードは、ChromeでPOSTを使用してLocalHostに動作します

<?php
if (isset($_SERVER['HTTP_Origin'])) {
    //header("Access-Control-Allow-Origin: {$_SERVER['HTTP_Origin']}");
    header("Access-Control-Allow-Origin: *");
    header('Access-Control-Allow-Credentials: true');    
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); 
}   
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers:{$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

    exit(0);
} 
?>
19
greensuisse