vue のデプロイ後にサーバー インターフェイスにアクセスできない

Vue プロジェクトの開発では、プロジェクトのデプロイメントが完了した後、バックエンド サーバーのインターフェイスにアクセスできないという非常に一般的な問題が発生することがあります。この状況は、フロントエンド ページでバックエンド データを表示できなくなり、プロジェクトが正常に実行できなくなるため、大きな問題となる可能性があります。

それでは、なぜこの問題が発生するのでしょうか?この問題を解決するにはどうすればよいでしょうか?この記事では、この問題を解決するために多面的に分析して説明します。

1. ブラウザのクロスドメインの問題

ブラウザの同一生成元ポリシーにより、通常、異なるソースからインターフェイスを直接リクエストすることは不可能です。たとえば、Vue プロジェクトが localhost:8080 で実行され、バックエンド サービス リクエストが localhost:3000 にある場合、フロントエンド ページはリクエストをバックエンドに送信できません。

この問題を解決するには多くの方法がありますが、解決策の 1 つはプロキシを使用することです。 Vue では、config/index.js ファイルで devServer.proxy オプションを設定することでプロキシを構成できます。例は次のとおりです:

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

この構成の意味は、/api で始まるすべてのリクエストを意味します。 http://localhost:3000 へのプロキシになります。このようにして、フロントエンド ページでバックエンド インターフェイスにアクセスできます。

2. バックエンド サービスの CORS 問題

ブラウザーの同一生成元ポリシーに加えて、バックエンド サービス自体にも CORS (クロスドメイン リソース) がある場合があります。共有) ポリシー セット。これにより、フロントエンド ページがバックエンド インターフェイスにアクセスできなくなる可能性もあります。

この問題を解決するには、次の方法を使用できます。

(1) バックエンドに Access-Control-Allow-Origin ヘッダーを設定します。バックエンドはすべてのソースを許可します アクセスするには、バックエンドに Access-Control-Allow-Origin ヘッダーを設定できます。例は次のとおりです:

Access-Control-Allow-Origin: *

この構成の意味は、すべてのソースからのフロントエンド ページを許可することです。このインターフェイスにアクセスするためのソース。もちろん、次のような特定のドメイン名に設定することもできます。

Access-Control-Allow-Origin: http://localhost:8080

この方法は非常に簡単ですが、すべてのソースを開くとセキュリティ上の問題が発生する可能性があることに注意してください。運用環境の特定のドメイン名。

(2) Vue でのリクエストに jsonp メソッドを使用する

バックエンドがフロントエンドによるインターフェイスの直接リクエストを許可していない場合は、jsonp メソッドを使用してクロスドメイン リクエストを実装できます。

Vue では、vue-jsonp ライブラリを使用して jsonp リクエストを行うことができます。例:

import Vue from 'vue'
import VueJsonp from 'vue-jsonp'
Vue.use(VueJsonp)

Vue.jsonp('http://example.com/data', {}).then((response) => {
  console.log(response)
})

このリクエストは、アクセスされたインターフェイス アドレスにコールバック パラメータを自動的に追加し、それによってクロスドメイン リクエストを実現します。

ネットワークの問題

3. 最後に、ネットワークの問題も考慮する必要があります。場合によっては、インターフェイスに実際に正常にアクセスできるにもかかわらず、ネットワークの問題によりフロントエンドがバックエンド インターフェイスにアクセスできない場合があります。

この場合、ネットワーク設定を確認するか、ツールを使用してネットワーク診断を実行できます。たとえば、Windows で ping コマンドを使用してネットワークを診断できます。

ping example.com

ネットワークに問題がある場合は、ネットワークを修復するか、ネットワークを交換することで問題を解決できます。

概要

上記は、Vue プロジェクトでのデプロイ後にバックエンド インターフェイスにアクセスできない問題と解決策です。プロジェクトごとに状況が異なるため、特定の状況に応じてデバッグして解決する必要があることに注意してください。上記のいずれの解決策でも問題を解決できない場合は、関連する技術担当者に支援を求めることを検討してください。

以上がvue のデプロイ後にサーバー インターフェイスにアクセスできないの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。