Vue Router のクロスドメインエラー報告の原因と解決策について話しましょう-フロントエンドQ&A-php.cn

Vue Router のクロスドメインエラー報告は、非常に一般的な問題です。 Vue Router を使用する場合、ドメインを越えて別の Web サイトや API にアクセスすると、クロスドメインエラーが発生します。この記事では、Vue Router のクロスドメインエラーの原因と解決策を紹介します。

1. クロスドメインの理由

ブラウザーでは、同一生成元ポリシーは、Web サイト内の JavaScript がそのサイト内のリソースのみにアクセスすることを制限するセキュリティメカニズムです。同一オリジンポリシーでは、あるドメイン名のページで Ajax を使用して別のドメイン名の API インターフェイスを呼び出すなど、スクリプトを介した他のドメインのデータへのクロスドメインアクセスは許可されません。これは、そうすることでセキュリティ上の問題が発生し、攻撃者がクロスドメインスクリプティングを通じてユーザーの機密情報を盗む可能性があるためです。

2. vue-router のクロスドメインエラー報告

Vue Router ルーティングはブラウザーに基づいているため、同一オリジンポリシーによっても制限されます。 Vue コンポーネントで Vue Router を使用して別のサイトまたは API インターフェイスにアクセスすると、クロスドメインエラーが発生します。一般的なエラーメッセージは次のとおりです:

オリジン 'http://localhost:8080' から 'http://xxxxxx' の XMLHttpRequest へのアクセスが CORS ポリシーによってブロックされました: No 'Access-Control-Allow-Origin ' ヘッダーが要求されたリソースに存在します。

このクロスドメインエラーでは CORS エラーが発生します。これは、ブラウザーが他のドメイン名へのリクエストを制限しており、他のサイトではサイトのリソースに対するクロスドメインリクエストが許可されていないためです。ローカルサーバーを使用している場合、サーバーが Vue Router のクロスドメインリクエストに必要な CORS を使用して構成されていない可能性があるため、この問題が発生する可能性があります。

3. クロスドメインエラーレポートを解決する方法

バックエンドプロキシを使用する

バックエンドプロキシは、クロスドメインの制限をバイパスできます。別のサイトにリクエストを送信し、レスポンスを受信することにより、サーバーはリクエストとレスポンスを完了し、リクエストされたリソースとレスポンスデータをそれぞれ処理します。フロントエンドコードでは、リクエストをバックエンドプロキシの URL に送信するだけで、バックエンドプロキシでリクエストをターゲット URL に送信し、受信した応答をフロントエンドに返します。以下はサンプルコードです:

// 前端代码 fetch('/api').then(res => { console.log(res) }) // 服务器代理代码 app.get('/api', (req, res) => { axios.get('http://othersite.com/api').then(response => { res.json(response.data) }).catch(error => { console.log(error) }) })

ログイン後にコピー

CORS の構成

ブラウザを通じてクロスドメイン API またはリソースに直接アクセスする場合は、サーバーの CORS を構成できます。あなた自身。サーバーに Access-Control-Allow-Origin ヘッダーを設定して、クロスオリジン要求を許可します。一般的な CORS 構成例をいくつか示します。

Node.js (Express):

res.header("Access-Control-Allow-Origin", "*") res.header("Access-Control-Allow-Headers", "X-Requested-With,Content-Type") res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS") next()

ログイン後にコピー

Apache:

 Header set Access-Control-Allow-Origin "*"

ログイン後にコピー

Nginx:

add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS'; add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range,Authorization'; add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';

ログイン後にコピー

4. 概要

Vue Router のクロスドメインエラー報告は、Vue.js フレームワークを使用して開発する場合に非常に一般的な問題です。問題を深く理解し、クロスドメインの問題の解決を支援し、バックエンドプロキシと CORS 構成を使用して CORS エラーを回避します。これにより、開発効率が向上するだけでなく、コードの品質も効果的に向上します。上記は、Vue Router によって報告されるクロスドメインエラーの原因と 2 つの解決策です。

以上がVue Router のクロスドメインエラー報告の原因と解決策について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。