Vue のクロスドメイン問題の原因と解決策の簡単な分析

フロントエンド テクノロジの発展により、Vue は、その使いやすさ、効率性、柔軟性だけでなく、その豊富なサポート エコシステムのおかげで、多くの開発者に非常に愛される JavaScript フレームワークになりました。しかし同時に、フロントエンド プロジェクトの規模がますます大きくなるにつれて、Vue プロジェクトのデプロイメントの問題が徐々に明らかになり、最も一般的な問題はクロスドメインの問題です。この記事では、Vue のクロスドメイン問題の原因、解決策、および関連する実践方法を紹介します。

1. Vue にクロスドメインの問題が発生するのはなぜですか?

Vue プロジェクトでクロスドメインの問題が発生する理由は、ブラウザーの同一オリジン ポリシーのためです。これは、フロントエンドがクロスドメイン リクエストを直接開始できないことを意味します。同一オリジン ポリシーは基本的なセキュリティ ポリシーですが、展開中に Vue 開発者に特定の問題を引き起こすこともあります。一般に、ブラウザは、2 つの URL のプロトコル (http または https)、ドメイン名、ポートが同じかどうかを判断することで、リクエストの発信元が同じかどうかを判断します。

Vue プロジェクトにおけるクロスドメインの問題の典型的な例は、フロントエンド プロジェクトが AJAX 経由でバックエンド API をリクエストするときに、バックエンド API の URL が同じドメインにない場合です。現在の Vue プロジェクトの URL を指定すると、クロスドメインの問題が発生します。

2. Vue のクロスドメインの問題を解決するにはどうすればよいですか?

問題が明確になったので、この問題を解決する方法を見つけてみましょう。以下では、クロスドメインの問題を解決するための 3 つの一般的な方法を紹介します。これらは最も広く使用されている 3 つの方法でもあります。

1. サーバーに CORS を設定する

サーバーに CORS を設定することで、クロスドメインの問題を解決できます。 CORS (クロスオリジン リソース共有) は、クロスドメインの問題に対するサーバー側のソリューションです。サーバーは、HTTP 応答に Access-Control-Allow-Origin ヘッダーを設定することで、どのドメイン名要求が許可されるかをブラウザーに伝えます。ブラウザは、要求されたドメイン名が許可されたアクセス範囲内にあることを検出すると、要求結果を正常に返すことができます。

具体的な実装方法は次のとおりです:

バックエンド応答ヘッダーに Access-Control-Allow-Origin 属性を設定して、フロントエンド アクセスを許可します:

Access-Control-Allow-Origin: *

上記のコードでは、 * すべてのリクエスト ソースが許可されることを示します。

2. webpack-dev-server の proxyTable 属性を使用する

Vue では、開発中にクロスドメインの問題を解決するために、webpack-dev-server を通じて proxyTable を設定できます。 proxyTable は、開発者のローカル要求をサーバーにプロキシして、クロスドメインの問題を効果的に解決できます。

proxyTable の設定方法は次のとおりです。

dev: {
    proxyTable: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }

上記のコードでは、/api はプロキシする必要があるリクエストを示し、target はプロキシする必要があるバックエンド サーバーのアドレスを示します。 proxied、changeOrigin: true はリクエストを変更するかどうかを示します。source、pathRewrite はリクエスト パスを書き換えるために使用されます。

3. JSONP を使用してクロスドメインの問題を解決する

JSONP はクロスドメイン ソリューションであり、スクリプト タグを Web ページに動的に追加し、このスクリプト タグを使用してクロスドメインにアクセスしますインターフェイスを介して対応する結果を取得すると、フロントエンドはリクエストの結果をコールバック関数にカプセル化し、それを返してクロスドメインリクエストを実装します。 JSONP の実装では、バックエンドが JavaScript コードを返します。このコードは、フロントエンドによって定義されたコールバック関数を呼び出し、データをパラメータとしてコールバック関数に渡します。フロントエンドは、コールバック関数のデータ。

以下は JSONP の実装です:

バックエンド コード:

app.get('/jsonp', (req, res) => {
    const { data } = req.query;
    const callback = req.query.callback;
    const result = callback + '(' + JSON.stringify({ code: 0, data: data }) + ')';
    res.end(result);
});

フロントエンド コード:

function jsonp(url, callback) {
    const script = document.createElement('script');
    script.src = `${url}?callback=${callback}`;
    document.body.append(script);
}

jsonp('http://localhost:3000/jsonp', function (res) {
    console.log(res);
});

3. クロスドメインの実践

実践 1: webpack-dev-server を使用して proxyTable を設定し、クロスドメインの問題を解決する

# フロントエンド Vue プロジェクトを使用して、バックエンド API へのリクエストを開始しましょうwebpack-dev-server の proxyTable 属性を通じて問題を解決する方法を説明する例。

1. webpack-dev-server と http-proxy-middleware をインストールします

webpack-dev-server と http-proxy-middleware をプロジェクトにインストールします。

npm install --save-dev webpack-dev-server http-proxy-middleware

2.webpack 設定ファイルに http-proxy-middleware を導入します

const proxyMiddleware = require('http-proxy-middleware')

3.webpack-dev-server 設定で proxyTable を使用します

proxyTable: {
    '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        }
    }
}

上記のコード内、リクエストをローカル ポート 3000 にプロキシするように /api プロキシを構成しました。

4. プロキシ リクエスト API を使用する

Vue プロジェクト コードでは、URL プレフィックスとして /api を使用するだけで、リクエストがローカル 3000 ポートに正常にプロキシされるようになります。

axios.get('/api/users')

実践 2: CORS を使用してバックエンドからクロスドメインの問題を解決する

バックエンドに CORS をセットアップして、クロスドメインの問題を解決できます。ここではnode.jsのExpressフレームワークを例に紹介します。

1. Express のインストール

Express をプロジェクトにインストールします。

npm install express

2.server.js または app.js ファイルに CORS を設定します

app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    next();
});

上記のコードは CORS を設定し、すべてのソースからのリクエストが正常に返されるようにします。

3. バックエンド API で、以前の CORS 設定を追加します

app.get('/users', (req, res) => {
    const data = [
        { id: 1, name: 'Jack' },
        { id: 2, name: 'Lily' }
    ];
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.json(data);
});

上記のコードでは、使用するサーバー応答ヘッダーに Access-Control-Allow-Origin 属性を追加します。どのドメイン名に対してリクエストを許可するかをブラウザに指示します。

4. Vue プロジェクトでリクエストを開始する

Vue プロジェクトでの Ajax リクエストの場合、通常の方法でリクエストを開始するだけです。

axios.get('/users').then(resp => {
    console.log(resp.data);
});

結論

Vue のクロスドメインの問題は比較的一般的な問題ですが、解決策をマスターしていれば簡単に解決できます。クロスドメインの問題の場合は、サーバー上で CORS をセットアップするか、webpack-dev-server の proxyTable 属性を使用するか、JSONP を使用して問題を解決できます。この記事では、これら 3 つの方法の具体的な使い方を実践を通じて紹介し、読者の皆様が実践でより多くのことを得ることができれば幸いです。

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