Vue がオンラインのときにクロスドメインの問題に対処する方法

Vue アプリケーションを開発する場合、フロントエンドとバックエンドの分離が発生し、クロスドメインの問題が発生する可能性があります。通常、ローカルで開発している場合にはクロスドメインの問題は発生しませんが、プロジェクトがオンラインになった場合、フロントエンドとバックエンドが異なるサーバーにデプロイされている場合、クロスドメインの問題が発生します。この記事では、この問題に適切に対処するために、Vue オンラインのクロスドメイン問題の背景と解決策を深く理解します。

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

クロスドメインとは、サーバー上のリソースにアクセスするときにクロスドメイン要求を使用することを指します。クロスドメインリクエストには多くの種類があり、一般的なリクエストには、リソースへのクロスドメインアクセス、Cookie のクロスドメイン書き込み、クロスドメイン呼び出しインターフェイスなどが含まれます。ブラウザのセキュリティ ポリシーでは、クロスドメイン リクエストはセキュリティ リスクを引き起こす可能性があるため、デフォルトで禁止されています。

Vue のクロスドメインの問題をオンラインで解決する

1. プロキシ サーバー

プロキシ サーバーは、フロントエンドがリクエストを行うと、インターフェイスが配置されているサーバーにリクエストを転送します。バックグラウンド インターフェイス フロントエンド コードは、リクエストが正常に処理されることを保証するために、リクエスト パスとしてプロキシ サーバーのアドレスを使用します。プロキシ サーバーを使用すると、フロントエンドはリクエストをインターフェイスに転送し、バックエンド インターフェイスの戻りコンテンツをプロキシし、戻りコンテンツを変更し、リクエストの前後に変更パラメータや処理ロジックを追加できます。ほとんどのプロキシ サーバーはバックエンド担当者によって作成され、フロントエンド プロジェクトから呼び出すことができます。

プロキシ サーバーには、Nginx、Alibaba Cloud API Gateway、Apache など、さまざまな種類があります。 Vue プロジェクトがオンラインになるときは、プロキシ サーバーを使用して、すべてのインターフェイスのアクセス パスが同じドメイン名を指すようにします。たとえば、すべてのインターフェイスのリクエスト パスを "/api" にリダイレクトし、リクエスト パスとして "/api" を使用します。次に、クロスドメインの問題を解決するために、「/api」で始まるリクエストをバックエンド インターフェイスが配置されているサーバーに転送する転送ルールをプロキシ サーバーに定義します。

Vue プロジェクトでプロキシ サーバーを構成します。

//vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true, //是否跨域
        pathRewrite: {
          '^/api': '/'
        }
      },
    }
  }
}

2.jsonp

JSONP は、JavaScript およびクロスドメイン リクエストのソリューションです。クライアントは、<script> タグを動的に作成し、リクエストされた URL (インターフェイス アドレス) とコールバック関数をパラメータとして追加し、リクエストをサーバーに送信します。サーバーはリクエストを受け入れると、JavaScript スクリプト、コールバック関数を返し、必要なデータを渡します。最後に、クライアントは返されたデータをコールバック関数で処理します。 JSONP はより柔軟なクロスドメイン ソリューションですが、サポートできるのは GET リクエストのみであり、プレーン テキスト形式のデータのみをリクエストできます。

Vue プロジェクトでの JSONP の使用:

this.$jsonp('http://api.jisuapi.com/weather/query', { //jsonp函数可以使用axios+jsonp的方式实现
    city: '上海',
    appkey: 'your appkey'
  }, (data) => {
    console.log(data)
  })

3.CORS

CORS (Cross-Origin Resource Sharing) は、クロスドメイン リクエストの公式ソリューションです。アプリケーション サーバーはクロスドメイン アクセス制御を実行し、ブラウザがクロスドメイン リクエストを安全に完了できるようにします。 CORS を使用するには、バックグラウンドで応答ヘッダー情報に Access-Control-Allow-Origin フィールドを追加し、それを「*」または指定されたドメイン名に設定するだけで、ブラウザーが応答ヘッダーに基づいて処理します。国境を越えた問題、ドメインリクエストの問題を解決するための情報。

バックグラウンドで応答ヘッダー情報を追加します:

//以Java Web服务为例，增加响应头信息
response.setHeader("Access-Control-Allow-Origin", "*");//允许跨域

4. WebSocket

WebSocket は、クロスドメインで役割を果たす全二重通信プロトコルです。非常に良い解決策です。 WebSocket は HTTP プロトコル経由でハンドシェイクを実行し、接続が作成された後、クライアントとサーバーの間でデータを両方向に転送できます。

Vue プロジェクトで WebSocket を使用する:

var ws = new WebSocket('ws://localhost:8080');
ws.onopen = function() {
  ws.send('发送消息到服务器');
};
ws.onmessage = function(event) {
  console.log('从服务器接受到 ', event.data);
}

概要

上記は、Vue オンラインのクロスドメインの問題を解決する 4 つの方法です: プロキシ サーバー、JSONP、CORS、ウェブソケット。さまざまなシナリオとさまざまなソリューションの選択は、Vue がオンラインになったときにクロスドメインの問題をより適切に解決し、プロジェクトをよりスムーズにするのに役立ちます。上記の方法を使用する場合は、プロジェクトをスムーズに開始するために安全性に注意を払う必要があることに注意してください。

以上がVue がオンラインのときにクロスドメインの問題に対処する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。