Ajax リクエストにおけるクロスドメイン問題の原因と解決策

1. クロスドメインはどのように形成されるのでしょうか?

現在のページ URL のプロトコル、ドメイン名、またはポートとは異なるプロトコル、ドメイン名、またはポートを持つ URL を要求することを、クロスドメインと呼びます。

クロスドメインにより次のことが起こります:
1. 同一オリジンではないウェブページのCookie、LocalStorage、IndexedDBを読み取ることができない
2. 同一オリジンでないウェブページのDOMにアクセスできない
3. 同じオリジンではないアドレスに AJAX リクエストを送信できない (送信はできるが、ブラウザは応答を拒否する)

2. クロスドメインの根本的な原因

クロスドメインリクエストの根本的な原因は、リクエスト元のブラウザの同一オリジンポリシーであり、クロスドメインリクエストエラーの理由は次のとおりです。ブラウザの同一オリジンポリシー && リクエストがAjaxタイプ && リクエストが実際にクロスドメインである

3. 解決策

jsonp、cors、プロキシ転送の3つの方法を紹介します

1. JSONP

JSONP は、サーバーとクライアント間のクロスオリジン通信によく使用される方法です。最大の特徴は、シンプルさ、適用性、優れた互換性（IE の下位バージョンと互換性がある）です。欠点は、GET リクエストのみをサポートし、POST リクエストはサポートしていないことです。
原則: img、srcipt、link タグの src または href 属性は、同一オリジン ポリシーによって制限されず、リクエストとして使用できます。バックエンドはリクエストを受信すると、コールバック関数を返し、フロントエンドで定義された関数を呼び出して、クロスドメイン リクエストを実装します。

非常に簡単な例を見てみましょう。img タグの src 属性を通じて、ネットワーク アドレスから画像を要求します。これは同一オリジンではない要求ですが、ブラウザーの同一オリジン ポリシーは Ajax 要求に対してのみ有効であるため、要求は影響を受けません。つまり、クロスドメインの問題が発生するのは Ajax リクエストのみです。

2. CORS

CORS は、Cross-Origin Resource Sharing の略です。これは W3C 標準であり、クロスオリジン AJAX リクエストの基本的なソリューションです。

CORS はあらゆるタイプのリクエストを許可します。 CORS を使用してデータにアクセスする場合、クライアントはデータ アクセス ロジックを変更する必要はありません。すべての作業はサーバーとブラウザ間で自動的に実行されます。フロントエンド コードは、通常の Ajax リクエストを送信する場合と変わりません。サーバー側で設定するだけで済みます (バックエンドはアクティブです)。

3. プロキシ転送

フロントエンド サービスとバックエンド インターフェイス サービスの間に中間プロキシ サービスを設定します。そのアドレスはフロントエンド サーバーのアドレスと同じままです。次に、次の操作を実行します。
この方法では、中間サーバーを介してインターフェース転送を実行し、開発環境でのクロスドメインの問題を解決できます。複雑に思えますが、実際には、vue-cli にはこのテクノロジが組み込まれています。必要に応じて設定するだけで済みます。

vue.config.js の devServer (開発環境) でプロキシ サーバーを構成し、このプロキシ サーバーを介してリクエストを送信します。これは純粋なクロスドメインの問題ではありません。コードは次のとおりです。

モジュール.エクスポート = {
  開発サーバー: {
    // ... 省略 // プロキシ設定 proxy: {
        // リクエストアドレスが /api で始まる場合、プロキシメカニズムがトリガーされます // http://localhost:9588/api/login -> http://localhost:3000/api/login
        '/api': {
          target: 'http://localhost:3000' // プロキシする実際のインターフェースアドレス}
      }
    }
  }
}

baseURL のルート パスは絶対アドレスではなく相対アドレスであることに注意してください。

上記は、Ajax リクエスト フロントエンドにおけるクロスドメイン問題の原因と解決策の詳細な内容です。Ajax クロスドメイン問題の原因と解決策の詳細については、123WORDPRESS.COM の他の関連記事に注目してください。