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はhttp://stackoverflow.com/をロードできません。Origin http：// localhostはAccess-Control-Allow-Originでは許可されていません。

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

Chrome はCORSリクエストのlocalhostをサポートしていません（2010年にオープンしたバグで、2014年にWontFixとマークされています）。

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

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

この問題を回避するには、Allow-Control-Allow-Origin：* Chrome拡張機能を使用します。拡張機能により、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フィルターでlocalhost URL のみをフィルターするように変更しました

*://localhost:*/*

本当の問題は、-Allow-すべてのリクエスト（OPTIONS＆POST）を設定すると、Chromeがそれをキャンセルすることです。次のコードはPOST、Chromeで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);
} 
?>

Chromeはlocalhost元の場所からCORSを使用してリクエストを送信します。これはChromeの問題ではありません。

ロードできない理由http://stackoverflow.comは、Access-Control-Allow-Originヘッダーがlocalhostオリジンを許可していなかったためです。

すばやく汚れたChrome拡張機能の修正：

Moesif Orign＆CORSチェンジャー

ただし、Chromeはlocalhostからのクロスオリジンリクエストをサポートしています。以下のためのヘッダを追加してくださいAccess-Control-Allow-Originについてlocalhost。

どの拡張機能も機能しなかったため、単純なローカルプロキシをインストールしました。私の場合、https：//www.npmjs.com/package/local-cors-proxy 2分間のセットアップです。

（彼らのサイトから）

npm install -g local-cors-proxy

CORSの問題がある、リクエストするAPIエンドポイント： https://www.yourdomain.ie/movies/list

プロキシを開始： lcp --proxyUrl https://www.yourdomain.ie

次に、クライアントコードで、新しいAPIエンドポイント： http://localhost:8010/proxy/movies/list

私にとっては魅力のように機能しました。アプリがプロキシを呼び出し、プロキシがサーバーを呼び出します。CORSの問題はありません。

代わりにヘッダーを変更せずにサーバー側でリダイレクトを行うことにしました。

以下の例は、Angularの現在のバージョン（現在は9）と、おそらくWebPacks DevServerを使用する他のフレームワークのものです。しかし、同じ原則が他のバックエンドでも機能すると思います。

そのため、ファイルproxy.conf.jsonで次の構成を使用します。

{
  "/api": {
    "target": "http://localhost:3000",
    "pathRewrite": {"^/api" : ""},
   "secure": false
 }
}

Angularの場合、私はその設定でサービスします：

$ ng serve -o --proxy-config=proxy.conf.json

私はserveコマンドでプロキシを使用することを好みますが、この構成を次のようにangular.jsonに置くこともできます。

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },

以下も参照してください。

https://www.techiediaries.com/fix-cors-with-angular-cli-proxy-configuration/

https://webpack.js.org/configuration/dev-server/#devserverproxy