Vue Router のクロスドメイン エラー報告の原因と解決策について話しましょう

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. クロスドメイン エラー レポートを解決する方法

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

バックエンド プロキシは、クロスドメインの制限をバイパスできます。別のサイトにリクエストを送信し、レスポンスを受信することにより、サーバーはリクエストとレスポンスを完了し、リクエストされたリソースとレスポンス データをそれぞれ処理します。フロントエンド コードでは、リクエストをバックエンド プロキシの 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)
  })
})

2. 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:

  <IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
  </IfModule>

• 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 サイトの他の関連記事を参照してください。