Vue+SpringBoot のフロントエンドとバックエンドの分離におけるクロスドメインの問題

Vue+SpringBoot のフロントエンドとバックエンドの分離におけるクロスドメインの問題

フロントエンドとバックエンドを分離した開発では、フロントエンドがバックエンドの API を呼び出してコンテンツを表示する必要があります。フロントエンドとバックエンドの開発が同じホスト上にある場合、ブラウザの相同性ポリシーの制限により、クロスドメインの問題 (異なるプロトコル、ドメイン名、ポート番号など) が発生し、API インターフェイスを正常に呼び出すことができず、開発に不便が生じます。

APIリクエストのカプセル化

'axios' から axios をインポートします

//axios.create は axios インスタンスを作成し、インスタンスの設定を書き込みます。インスタンスを介して送信される後続のすべてのリクエストは、現在の設定の対象となります。const $http = axios.create({
    ベースURL: ''、
    タイムアウト: 1000、
    //ヘッダー: {'X-Custom-Header': 'foobar'}
});

// リクエストインターセプターを追加 $http.interceptors.request.use(function (config) {
    // リクエストを送信する前に何かを実行します return config;
}, 関数 (エラー) {
    // リクエストエラーに対して何かを実行します。 return Promise.reject(error);
});

// レスポンスインターセプターを追加 $http.interceptors.response.use(function (response) {
    // レスポンスデータで何かを行う return response.data; // レスポンスデータのデータ部分を返す }, function (error) {
    // エラーに対して何らかの処理を実行します。 return Promise.reject(error);
});

デフォルトの$httpをエクスポートする

API呼び出し関数

エクスポートconst getCourses = () => {
$http.get('http://localhost:8080/teacher/courses') を返します
} 

この例では、フロントエンドはポート 8081 を使用し、バックエンドはポート 8080 を使用し、フロントエンドは API を呼び出してデータを要求できません。

Postmanは、このAPIインターフェースが正常であることをテストします

相同性問題をどうやって解決するか?

1. vueルートディレクトリに新しいvue.config.jsファイルを作成し、設定します。

vue.config.js ファイル

モジュール.エクスポート = {
    開発サーバー: {
        host: 'localhost', //ホスト番号 port: 8081, //ポート番号 open: true, //ブラウザプロキシを自動的に開く: {
            '/api': {
                target: 'http://localhost:8080/', //インターフェースドメイン名の変更Origin: true, //クロスドメインですか? ws: true, //Websocketのプロキシですか?
                secure: true, //https インターフェースかどうか pathRewrite: { //パスをリセット '^/api': '/'
                }
            }
        }
    }
};

2. APIリクエストを変更する

API呼び出し関数

エクスポートconst getCourses = () => {
  $http.get('/api/teacher/courses') を返します
}

ここでは、vue.config.jsがインターフェースのドメイン名を設定するので、ここのURLには残りを記述するだけで済みます。

URL 本文

http://localhost:8080/teacher/courses

ただし、ここではプロキシを使用しているため、残りの部分(つまり「/teacher/courses」)の前に「/api」を追加して「/api/teacher/courses」を形成します。

この時点で、クロスドメイン問題は解決され、フロントエンドはバックエンドインターフェースからデータを取得して表示することができます。

問題は解決しました!

Vue+SpringBoot のフロントエンドとバックエンドの分離におけるクロスドメイン問題についての記事はこれで終わりです。より関連性の高い vue SpringBoot フロントエンドとバックエンドの分離のクロスドメインコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • SpringBoot+Vue+JWTのフロントエンドとバックエンドを分離したログイン認証の詳細な手順
  • Springboot+VUEフロントエンドとバックエンドの分離による防疫プラットフォームJAVAの実現
  • Vue と Springboot を組み合わせてユーザーリストの単一ページを実現 (フロントエンドとバックエンドの分離)
  • Vueのフロントエンドシステムとフロントエンドとバックエンドの分離の詳細な説明

<<:  新しいユーザーを作成し、MySQLに権限を付与する最も簡単な方法

>>:  Linux jdk のインストールと環境変数の設定チュートリアル (jdk-8u144-linux-x64.tar.gz)

推薦する

MySQL がデフォルト値を持つ NULL 列の使用を推奨しない理由

よく聞かれる答えは、列に NULL 値を使用するとインデックスが無効になるというものですが、実際にテ...

ウェブサイトでページコンテンツや情報を直接コピーできない問題を解決する方法

最近では、多くのウェブサイトでは、ページ上の特定のコンテンツや情報を直接コピーすることは許可されてお...

負荷分散と動的・静的分離を実現するNginx+Tomcatの原理の分析

1. Nginx ロードバランシングの実装原理1. Nginxはリバースプロキシを通じて負荷分散を実...

JavaでTomcatサーバーを起動/停止する方法

1. プロジェクト構造 2.Tomcat.javaを呼び出す パッケージ com.calltomca...

Vue.jsはコンポーネントを通じてアイコンを処理します

アイコン処理ソリューションこの記録の目的は、element-plus 以外のアイコンをコンポーネント...

HTML のインラインブロックの空白を素早く削除する 5 つの方法

inline-block プロパティ値は、「インライン」要素のマージンとパディングを制御する必要があ...

Nginx http ヘルスチェック構成プロセス分析

パッシブチェックパッシブ ヘルス チェックでは、NGINX と NGINX Plus はイベントの発...

HTMLでは、全体的なスタイルとレイアウトを崩さずに、部分的に強制スクロールバーを使用できます。

まずはエフェクト画像を投稿します:全体的なスタイルとレイアウトが崩れないように、スクロール バーがロ...

WeChatミニプログラムユーザー認証による携帯電話番号の取得(getPhoneNumber)

序文ミニプログラムには、ユーザーを取得するための非常に便利な API があり、getPhoneNum...

Dockerアーキテクチャ入門

Docker には 3 つの基本概念が含まれています。イメージ: Docker イメージはルート フ...

Vue ファースト スクリーン パフォーマンス最適化コンポーネントの知識ポイントの概要

Vue ファースト スクリーン パフォーマンス最適化コンポーネントVue ファースト スクリーン パ...

ネイティブ js はカスタム スクロール バー コンポーネントを実装します

この記事の例では、カスタムスクロールバーコンポーネントを実装するためのjsの具体的なコードを参考まで...

CSS で平均レイアウトを実現するためにネガティブ マージン テクノロジーを使用する方法

通常、IE ブラウザでの CSS の互換性の問題を解決するために、フロート レイアウトが使用されます...

vue3.0共通コンポーネントの自動インポート方法の例

1. 前提条件インポートには require.context メソッドを使用します。vite で作成...

SQL IDENTITY_INSERT ケーススタディ

一般的に、データ テーブル内の列を ID 列として設定すると、ID 列の表示値を手動で ID 列に挿...