Vue のクロスドメイン問題の処理と解決策の概要

ネットワークリクエストを送信すると、次の保存情報が表示されます。おめでとうございます。ドメインを越えました。

発信元「XXXXXX」からの「XXXXX」のXMLHttpRequestへのアクセスはブロックされました
CORS ポリシー: プリフライト リクエストへの応答がアクセス制御チェックに合格しません:
要求されたリソースに「Access-Control-Allow-Origin」ヘッダーが存在しません。

1.1 クロスドメインとは何ですか?

クロスドメイン問題は、ブラウザの相同性ポリシーが原因で発生します。相同性とは、2 つのページのプロトコル、ホスト、ポート番号が同じであることを意味します。これは、ブラウザのコア機能であり、最も基本的な機能です。相同性ポリシーがなければ、ブラウザは非常に危険になり、いつでも攻撃を受ける可能性があります。

プロトコル名、ドメイン名、ポート番号のいずれかが異なる場合、クロスドメイン問題が発生します。

ここで強調しておきたいのは、クロスドメイン処理はリクエストが送信されなかったことを意味するわけではないということです。これは、リクエストが正常に送信され、サーバーもデータを返したが、ブラウザがセキュリティ上の理由でそれを拒否したことを意味します。

2.2 クロスドメインの問題を解決するには?

1. 方法1

条件が許せば、バックエンドと通信できます。バックエンドは応答時にレスポンス ヘッダーを追加し、フロントエンドは操作なしでクロスドメインを処理できます。

2. 方法2

Vue スキャフォールディングは非常にシンプルなメソッドを提供します:

cli3 以上を使用している場合、ディレクトリ内に設定ファイルはありません。ルートディレクトリに vue.config.js ファイルを作成し、必要な設定情報を追加する必要があります。

モジュール.エクスポート={
    ページ: {
        索引： {
        //エントリ:"src/main.js",
        },
    },
    開発サーバー: {
        プロキシ： {
            '/api': {
                ターゲット: 'リクエストするURL'、
                パス書き換え:{'^/api':''},
                ws: 真、
                変更元: true
            }
        }
    }
}

サーバーとサーバーの間にクロスドメインの問題がないため、ブラウザではなくバックエンドからデータを要求するためのプロキシ サーバーが作成されます。

このプロキシサーバーのプロトコルドメイン名とポート番号は、プロジェクトを実行するときのプロトコルドメイン名とポート番号と同じです。

http://localhost:8080/api を使用します。データを要求するときに /api を追加すると、クロスドメインを処理する必要があることが認識されます。追加しない場合は、プロジェクトのルートディレクトリ内の対応するデータにアクセスすることになります。

3. 方法3

jsonp を使用していますが、post、put、patch などの get リクエストのみを処理できます。

これで、Vue のクロスドメイン処理の問題に関するこの記事は終了です。Vue のクロスドメイン処理に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。