Vue でクロスドメインリクエストを行うにはどうすればよいですか?

Vue は、最新の Web アプリケーションを構築するための人気のある JavaScript フレームワークです。 Vue を使用してアプリケーションを開発する場合、多くの場合、異なるサーバー上にあるさまざまな API と対話する必要があります。クロスドメイン セキュリティ ポリシーの制限により、Vue アプリケーションが 1 つのドメイン名で実行されている場合、別のドメイン名の API と直接通信することはできません。この記事では、Vue でクロスドメイン リクエストを行うためのいくつかの方法を紹介します。

1. プロキシの使用

一般的なクロスドメイン ソリューションは、プロキシを使用することです。この場合、Vue アプリケーションは、同じサーバーに HTTP リクエストを送信することで、ブラウザーの同一オリジン ポリシーをバイパスします。サーバーはリクエストを受信し、実際の API に転送します。プロキシ サーバーは API と同じドメイン上にあるため、ブラウザはこれに対してクロスドメイン セキュリティ制限を発行しません。プロキシを設定する方法の例を次に示します。

// vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

上記の例では、/api で始まるすべてのリクエストを https://example.com# にプロキシします。 ＃ ＃優れた。 changeOrigin は true に設定され、ソースが target のアドレスに設定され、pathRewrite が /api## に設定されます。 # リクエストから削除します。 2. JSONP (GET リクエストのみ)

JSONP は、GET リクエストを使用してさまざまなドメインに

Label 。コールバック関数名をパラメータとして渡すことで、サーバーは JSON データをコールバック関数でラップし、クライアントに返すことができます。スクリプト ソースは同一生成元ポリシーの影響を受けないため、ブラウザは異なるドメインから返されるスクリプトを制限しません。このメソッドはリクエスト本文がないため、GET リクエストに対してのみ機能します。 以下は JSONP の例です:

export default {
  getData() {
    return new Promise((resolve, reject) => {
      const script = document.createElement('script');
      const url = 'https://example.com/data?callback=getdata';

      script.src = url;
      document.head.appendChild(script);

      window.getdata = (data) => {
        document.head.removeChild(script);
        delete window.getdata;
        resolve(data);
      }
    });
  }
}

上の例では、Promise を使用して JSONP リクエストをカプセル化し、

<script>

タグを作成して追加します。 document.headに追加します。サーバーがデータを返したら、コールバック関数の名前を window.getdata に設定し、コールバック関数の <script> タグを削除して、データを に渡します。解決コールバック。 3. CORS

Cross-Origin Resource Sharing (CORS) は、サーバーが API へのアクセス許可を持つオリジン (ドメイン名) を指定できる最新のクロスドメイン ソリューションです。サーバーは、特定の応答ヘッダーを返すことによってこれを行います。ブラウザがクロスオリジンリクエストを行う場合、リクエストが許可されているかどうかを確認するために、プリフライトリクエストのサーバーアクセスコントロールレスポンスヘッダーをリクエストします。 API がこの応答ヘッダーを返す場合、ブラウザはクロスオリジンリクエストを許可します。

以下は CORS の例です:

export default {
  getData() {
    return fetch('https://example.com/data', {
      method: 'GET',
      mode: 'cors',
      headers: {
        'Access-Control-Allow-Origin': '*'
      }
    })
      .then(response => response.json())
      .then(data => data);
  }
}

上の例では、

fetch

関数を使用して API データを取得し、同時に mode を変更します。 CORS を有効にするには、cors に設定します。また、リクエスト ヘッダーに Access-Control-Allow-Origin ヘッダーを設定します。これにより、すべてのオリジンが API にアクセスできるようになります。 CORS が適切に機能するには、サーバーが応答でこのヘッダーを返す必要があることに注意してください。 結論

プロキシ、JSONP、CORS などのさまざまな方法を使用して、Vue でクロスドメイン リクエストを行うことができます。各方法には、独自の長所、短所、および適用可能なシナリオがあります。特定のソリューションの使用を選択する場合は、API のセキュリティ、リクエストの複雑さ、応答の速度を考慮してください。

以上がVue でクロスドメインリクエストを行うにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。