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

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

PHPz

リリース： 2023-06-10 22:30:09

オリジナル

5373 人が閲覧しました

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 リクエストをカプセル化し、

タグを作成して追加します。 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 が適切に機能するには、サーバーが応答でこのヘッダーを返す必要があることに注意してください。結論