クロスオリジン AJAX リクエストの「オリジンは Access-Control-Allow-Origin によって許可されていません」エラーを解決する方法

問題: 「Access-Control-Allow-Origin によってオリジンが許可されていません」

JavaScript を使用してクロスオリジン AJAX リクエストを実行すると、次のエラーが発生する場合があります:

Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin

このエラーは、悪意のあるスクリプトが他のドメインからのデータにアクセスするのを防ぐためにブラウザに実装されたセキュリティ機能である「同一生成元ポリシー」が原因で発生します。

原因

「同一オリジン ポリシー」は、AJAX リクエストを元のページと同じドメイン、プロトコル、ポートに制限します。 JavaScript がアクセスしようとしているサーバーとは異なるドメイン、プロトコル、またはポートでホストされている場合、リクエストはブロックされます。

解決策: JSONP

「同じ」を回避するにはOrigin Policy に準拠した一般的な解決策の 1 つは、JSONP (パディング付き JSON) を使用することです。 JSONP を使用すると、独自の JavaScript で定義されたコールバック関数で応答をラップすることで、クロスオリジン リクエストを作成できます。

JSONP の仕組みは次のとおりです。

1. コールバック関数を定義します。
2. ?callback={callback_function_name} で終わる URL を使用して AJAX リクエストを送信します。
3. サーバーは、コールバック関数でラップされた JSON データで応答します。
4. コールバック関数が実行され、応答データを受信します。

例

YouTube へのクロスオリジン POST リクエストを実行しようとしている、指定されたコード内のエラーを解決するには、次のようにします。次のように JSONP を使用できます:

<code class="javascript">var script = document.createElement('script');
script.src = "http://gdata.youtube.com/action/GetUploadToken?callback=callbackFunction";
document.head.appendChild(script);

function callbackFunction(data) {
    // Use the response data
}</code>

この例では、callbackFunction は独自の JavaScript で定義された関数であり、YouTube からの応答を引数として受け取ります。

注: リクエストの送信先サーバーが JSONP をサポートしていること、および URL で正しいコールバック関数名を使用していることを確認することが重要です。

以上がクロスオリジン AJAX リクエストの「オリジンは Access-Control-Allow-Origin によって許可されていません」エラーを解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。