1. クロスドメインの理由
ブラウザがリクエストを送信するとき、リクエストされたアドレスはブラウザのプロトコル ドメイン名 ポートとまったく同じではありません。セキュリティを保護するために、ブラウザはエラー メッセージを報告します。
注: すべてのクロスドメイン リクエストがエラーを報告するわけではありません。たとえば、通常の CSS リクエストや画像リクエストはエラーを報告しません
。クロスドメイン リクエストのエラーについては、次の 2 つの条件を満たす必要があります。
1. ブラウザの同一オリジンポリシー
2.リクエストタイプはajaxタイプです
2、解決策
実際の最善の解決策:バックエンド (CORS) にコードを記述して、必要な応答ヘッダーを応答に追加し、応答が返された後にブラウザーがエラーを報告しないようにします
。
1. フロントエンドは JSONP を使用してリクエストを送信します (jsonp は ajax リクエストではありません)
2. サーバープロキシ（Webpackプロキシ）
3. vue-cli を使用してプロキシ転送を設定する方法
ステップ 1: vue.config.js に次の構成を追加します。
module.exports = { devServer: { // プロキシ構成 proxy: { // リクエスト アドレスが /api で始まる場合、プロキシ メカニズムがトリガーされます // http://localhost:9588/api/login -> http:/ / line /api/login のアドレス' /api': { target: 'http://プロキシしたい実際のインターフェイス アドレス' } } } }
step2: ベースアドレスを削除する
const request = axios.create({
ベースURL: ''、
タイムアウト: 5000
})
ステップ 3: 構成ファイルを変更した後、プロジェクトを再起動して効果を確認します。
知らせ：
1. バックエンドがすでにクロスドメイン処理を行っている場合、フロントエンドは再度クロスドメイン処理を行う必要はありません。
2. プロキシ転送は開発段階でのみ使用でき、オンラインになった後、Webpack サーバーのサービスを享受できなくなった場合は使用できません。
原理：
1. vue-cli スキャフォールディング ツールが開始されると、フロントエンド プロジェクトのサーバーが開き、同じ LAN 内のユーザーは IP アドレスを介してそれにアクセスできます。
2. vue-cli スキャフォールディングは、プロキシの構成をサポートします。指定された種類のリクエストをターゲット サーバーに転送します。
2.1 プロキシサービスとフロントエンドサービス間でプロトコルのドメイン名とポートが統一されているため、クロスドメインの問題がなく、リクエストを直接送信できます。
このようにして、サーバー プロキシ経由でインターフェイスを転送し、開発環境でのクロスドメインの問題を解決できます。vue-cli にはこのテクノロジが組み込まれているため、上記に従って単純に設定するだけで済みます。ステップ。
以下は図的に理解したものです。
