Vue のクロスドメイン アクセス問題の解決策

フロントエンド開発では、クロスドメイン アクセスの問題がよく発生します。広く使用されているフロントエンド フレームワークである Vue では、この問題が頻繁に発生します。この記事では、Vue のクロスドメイン アクセスの問題とその解決策を紹介します。

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

簡単に言えば、クロスドメイン アクセスとは、あるドメインの Web ページが別のドメインのリソースにアクセスすることを指します。たとえば、ドメイン名 http://www.example.com のページからドメイン名 http://www.example2.com のリソースをリクエストすると、クロスドメイン アクセスが発生します。

Vue でのクロスドメイン アクセスの問題

Vue を使用して Ajax リクエストを送信する場合、リクエストされた URL が現在のページのドメイン名と異なる場合、クロスドメイン アクセスの問題が発生します。 。この場合、ブラウザはサーバーに OPTIONS リクエストを送信して、サーバーがクロスドメイン アクセスをサポートしているかどうかを尋ねます。サーバーがクロスドメイン アクセスを許可する応答ヘッダーを返した場合にのみ、Ajax リクエストは正常に完了できます。

解決策

Vue のクロスドメイン アクセスの問題を解決するには、いくつかの方法があります。

1. プロキシの使用

Vue-cli は、プロキシを構成することでクロスドメイン アクセスを解決する方法を提供します。 config ディレクトリの Index.js ファイルでプロキシを構成することで、クロスドメイン アクセスを実現できます。

具体的な手順は次のとおりです。

index.js ファイルの dev オブジェクトに proxyTable 属性を追加します。

proxyTable: {
  // 将所有以/api开头的请求代理到http://localhost:3000上
  '/api': {
    target: 'http://localhost:3000',
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''
    }
  }
}

この時点で、/api で始まる URL をリクエストすると、http://localhost:3000 にプロキシされます。 changeOrigin 属性は true に設定され、クロスドメイン要求を行うときに要求ヘッダーのorigin フィールドを変更する必要があることを示します。pathRewrite 属性は、要求パスの /api が空の文字列に置き換えられることを示します。

2.JSONP (GET リクエストにのみ適用可能)

JSONP は、ページにスクリプト タグを動的に追加することでクロスドメイン リクエストを実装する方法です。 Vue で JSONP を使用することで、クロスドメイン アクセスの問題を解決できます。

具体的な手順は次のとおりです。

jsonp ライブラリをインストールします

npm install jsonp --save

ページで JSONP を使用します

import jsonp from 'jsonp'

jsonp(url, options, (err, data) => {
  if (!err) {
    // 处理数据
  }
})

url は要求された URL を表し、options は要求された URL を表します。要求されたパラメータ。コールバック関数内のデータ (err, data) が返されるデータです。

3.CORS

CORS は、サーバーがクロスドメイン アクセスを許可するかどうかを決定できるようにする、W3C によって開発された標準です。サーバー側でいくつかの構成を行って、サーバーが CORS をサポートできるようにすることができます。設定方法はサーバーごとに異なるため、ここでは詳しく説明しません。

CORS を使用する場合、クロスドメイン アクセスを実現するには、Vue の withCredentials 属性を使用する必要があります。具体的な手順は次のとおりです。

Vue で withCredentials 属性を有効にする

Vue.http.options.credentials = true

withCredentials 属性は、クロスドメイン要求で Cookie などのユーザー資格情報の送信を許可するかどうかを示します。

結論

Vue でのクロスドメイン アクセスの問題を解決する方法はたくさんありますが、それぞれの方法には長所と短所があります。プロキシ メソッドを使用すると、Vue のクロスドメイン アクセスの問題を十分に解決できます。JSONP は GET リクエストにのみ適しています。CORS メソッドを使用する場合は、サーバー側でいくつかの設定が必要です。実際の状況に基づいて適切な解決策を選択する必要があります。

以上がVue のクロスドメイン アクセス問題の解決策の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。