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 リクエストを使用してさまざまなドメインに

afc7e4d28950972558a5eb295e9d2bad

タグを作成して追加します。 document.headに追加します。サーバーがデータを返したら、コールバック関数の名前を window.getdata に設定し、コールバック関数の 3f1c4e4b6b16bbbd69b2ee476dc4f83a タグを削除して、データを に渡します。解決コールバック。 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 サイトの他の関連記事を参照してください。