vue のデプロイ後にサーバーインターフェイスにアクセスできない-フロントエンドQ&A-php.cn

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

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

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

ブラウザの同一生成元ポリシーにより、通常、異なるソースからインターフェイスを直接リクエストすることは不可能です。たとえば、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 へのプロキシになります。このようにして、フロントエンドページでバックエンドインターフェイスにアクセスできます。

バックエンドサービスの 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) })

ログイン後にコピー

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

ネットワークの問題

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

ping example.com

ログイン後にコピー

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

概要

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

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