Vue プロジェクト開発におけるクロスドメインリクエスト処理の経験を共有する

フロントエンド テクノロジの継続的な開発と普及に伴い、その 1 つとして Vue がますます注目され、応用されるようになりました。 Vue プロジェクトの開発では、クロスドメインリクエストの問題がよく発生しますが、プロジェクトを正常に実行するにはどうすればよいでしょうか?この記事では、個人的な経験に基づいて、Vue プロジェクト開発におけるクロスドメイン要求処理の経験をいくつか紹介します。

まず第一に、クロスドメイン リクエストとは何ですか?簡単に言うと、あるドメイン名の Web ページは、別のドメイン名のリソースにアクセスできません。具体的には、フロントエンドとバックエンドが分離されている場合、フロントエンド アプリケーション (Vue アプリケーションなど) がバックエンド API へのリクエストを開始すると、両者は異なるドメイン名の下にあるため、制限されます。ブラウザの同一オリジンポリシーにより正常にアクセスできません。現時点では、クロスドメインリクエストを処理するために何らかの手段を使用する必要があります。

1. プロキシを使用する

クロスドメイン リクエストを処理する一般的な方法の 1 つは、プロキシを使用することです。つまり、Vue アプリケーションの構成ファイルにプロキシ サーバーのアドレスを設定し、最初にプロキシ サーバーへのリクエストを開始し、次にプロキシ サーバーがそれをバックエンド API に転送します。このようにして、フロントエンド アプリケーションは通常、バックエンド API にデータを要求できます。 Vue プロジェクトでは、vue.config.js で次の設定を行うことができます。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '/api': '/'
        }
      }
    }
  }
}

このうち、target パラメーターはバックエンドのアドレスを指します。 API、changeOrigin は、リクエスト ヘッダーの Origin 属性を変更するかどうかを示します。pathRewrite は、リクエスト パスを書き換えるために使用され、 で始まるパスを置き換えます。 /api (パスは / で始まります)。

2. JSONP の使用

JSONP (パディング付き JSON) は、<script></script> タグを使用した GET リクエストを利用してクロスドメイン リクエストを実装する方法です。 。具体的な実装は、フロントエンド アプリケーションで <script></script> タグを作成し、要求された URL をバックエンド API の URL に設定し、その URL でコールバック関数名を渡します。バックエンド API はデータを返します。データがコールバック関数名の関数呼び出しにラップされて返されると、フロントエンド アプリケーションはコールバック関数名を通じてデータを取得できます。 Vue プロジェクトでは、JSONP リクエストは次の方法で実装できます。

export function jsonp (url, data, callback) {
  let script = document.createElement('script')
  let params = ''
  for (let key in data) {
    params += `${key}=${data[key]}&`
  }
  url += '?' + params
  script.src = url + 'callback=' + callback
  document.body.appendChild(script)
  // 移除script标签
  script.onload = function () {
    document.body.removeChild(script)
  }
}

このうち、url パラメータはバックエンド API、data のアドレスです。 パラメータはリクエストパラメータです。callbackパラメータはコールバック関数名です。このメソッドは、<script></script> タグを作成して GET リクエストを開始し、リクエスト結果を関数呼び出しとしてコールバック関数に返します。

3. CORS を使用する

CORS (Cross-Origin Resource Sharing) は標準的なクロスドメイン要求ソリューションであり、主にブラウザとサーバー間の対話に関係します。サーバー側の応答ヘッダーで Access-Control-Allow-Origin 属性を構成すると、フロントエンド アプリケーションがドメインを越えてバックエンド API にアクセスできるようになります。 Vue プロジェクトでは、XHR リクエストの withCredentials 属性を true に設定して、CORS リクエストを開始できます。具体的な実装は次のとおりです。

export function xhr (method, url, data, headers) {
  return new Promise((resolve, reject) => {
    let xhr = new XMLHttpRequest()
    xhr.withCredentials = true
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4) {
        if (xhr.status === 200) {
          resolve(JSON.parse(xhr.responseText))
        } else {
          reject(xhr.statusText)
        }
      }
    }
    xhr.open(method, url, true)
    for (let key in headers) {
      xhr.setRequestHeader(key, headers[key])
    }
    xhr.send(data)
  })
}

このうち、method パラメータはリクエスト メソッド、url パラメータはリクエスト アドレス、data はリクエスト メソッドです。 パラメータはリクエスト パラメータです。headersパラメータはリクエスト ヘッダーです。このメソッドは XMLHttpRequest オブジェクトを作成し、その withCredentials 属性を true に設定し、XHR リクエストを開始し、応答が完了した後に Promise 結果を返します。

要約すると、プロキシ、JSONP、CORS を使用してクロスドメイン リクエストを処理することで、Vue プロジェクトはフロントエンド データとバックエンド データを正常に操作できるようになり、開発効率とユーザー エクスペリエンスが向上します。特定のアプリケーションでは、プロジェクトの要件とバックエンド API インターフェイスに応じて適切な方法を選択できます。

以上がVue プロジェクト開発におけるクロスドメインリクエスト処理の経験を共有するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。