SpringBoot と Vue の相互作用におけるクロスドメイン問題の解決策

SpringBoot と Vue の相互作用におけるクロスドメイン問題の解決策

こんにちは、バグを書くのが本当に得意なプログラマーのグレイ・エイプです。

ブラウザ同一生成元ポリシー

クロスドメインの問題はなぜ発生するのでしょうか? まず、ブラウザのホモロジー ポリシーである定義を理解する必要があります。

ブラウザの同一生成元ポリシーとは何ですか? 簡単に言うと、ブラウザがリクエストを送信するために使用するプロトコル、ドメイン名、ポートは、サーバーがリクエストを受信するために使用するプロトコル、ドメイン名、ポートと一致している必要があります。これは相互作用を完了する唯一の方法ですが、明らかに不可能であり、特に同じコンピューター上でフロントエンドとバックエンドが分離されたプロジェクトを開発する場合は、2 つのポートを使用する必要があります。これにより、クロスドメインの問題が発生します。

ここでは、クロスドメインの問題を解決するために使用した 2 つの方法を紹介します。

1. VUEフロントエンド構成プロキシはクロスドメインの問題を解決します

(1)ブラウザリクエストがVueでクッキーを運ぶことを許可する

まず、クロスドメインの問題を発見した経緯をお話しします。最初は、フロントエンド ブラウザからバックエンドにリクエストを送信するときに、ブラウザの Cookie を転送しませんでしたが、これではブラウザのリクエストを検証することができませんでした。そこで、その後、リクエストを送信するたびにブラウザが http リクエスト ヘッダーに Cookie を転送する方法を使用しました。方法は次のとおりです。

vue の main.js メソッドに次のコードを記述します。

// axios 依存関係を導入する import axios from 'axios'
//リクエストにブラウザのクッキーを渡す
axios.defaults.withCredentials=true
Vue.prototype.$axios = axios

上記は、axios リクエスト、つまり ajax リクエストを導入し、同時に資格情報の書き込みを有効にすることを意味します。Cookie は、withCredentials が true に等しい場合にのみ送信されます。

(2)クロスドメイン問題を解決するためにVueでプロキシを設定する

Vue でクロスドメイン問題を解決するのは実はとても簡単です。ブラウザがリクエストを送信するたびに、URL の前半が同じでなければならないからです (例http://localhost:8080/blogshttp://localhost:8080/login 。同一の URL を抽出し、 axios.defaults.baseURLにカプセル化することができます。このようにして、リクエストを行うたびにリクエスト アドレスを“/blogs”に短縮できます。これは、URL ヘッダーの単純なカプセル化と同じです。

注: axios.defaults.baseURL =
"http://localhost:8080"
を設定しますaxios.defaults.baseURL =
"http://localhost:8080"
axios.js にaxios.defaults.baseURL =
"http://localhost:8080"
と記述する必要があります

しかし、クロスドメインの問題を解決するときは、 axios.defaults.baseURL = "http://localhost:8080"axios.defaults.baseURL = “/api”と記述する必要があります。
この方法では、各リクエストのパスの前に“/api”が付きます。
これも最初のステップです。

最初のステップは、統一されたアクセスパスを設定することです

axios.js で、 axios.defaults.baseURL = "http://localhost:8080"寫成axios.defaults.baseURL = "/api"設定します。

ステップ2: クロスドメインプロキシを構成する

babel.config.jsと同じディレクトリに新しいjsファイルvue.config.jsを作成します。

ここに画像の説明を挿入

そこに次のコードを記述します。このコードは、クロスドメイン問題を解決するために構成されたプロキシです。私のバックエンド サーバーのリクエスト接続は http://localhost:8081 です。これと異なる場合は、変更する必要があります。

/**
 * クロスドメインの問題を解決する* @type {{devServer: {proxy: {"/api": {changeOrigin: boolean, pathRewrite: {"^/api": string}, target: string}}, host: string, open: boolean}}}
 */
モジュール.エクスポート = {
    開発サーバー: {
        ホスト: 'localhost',
        open: true, // ブラウザを自動的に開きます // プロキシ設定テーブル。対応する API インターフェースへの特定のリクエスト プロキシを設定できます // たとえば、'localhost:8080/api/xxx' を 'www.example.com/api/xxx' にプロキシします
        プロキシ: {
            '/api': { // '/api' で始まるすべてのリクエスト パスに一致しますtarget: 'http://localhost:8081', // プロキシ ターゲットのベース パス//secure: false, // https インターフェースの場合は、このパラメータを構成する必要がありますchangeOrigin: true, // クロスドメイン パスをサポートしますRewrite: { // パスの書き換え: パスの先頭の '/api' を削除します
                    '^/api': ''
                }
            }
        }
    }
}

ステップ3: テストリクエスト

今すぐログイン要求を送信する場合、要求は次のように記述する必要があります。

this.$axios.post("/ログイン")

2. Springbootバックエンド構成はクロスドメインの問題を解決します

Springboot フレームワークのバックエンドでクロスドメイン問題を解決するには、CorsConfig クラスを追加し、WebMvcConfigurer インターフェースを実装するだけです。コードは次のとおりです。通常は、開発中にコードをコピーするだけで済みます。

org.springframework.context.annotation.Configuration をインポートします。
org.springframework.web.servlet.config.annotation.CorsRegistry をインポートします。
org.springframework.web.servlet.config.annotation.WebMvcConfigurer をインポートします。

/**
 * クロスドメインの問題を解決する */
@構成
パブリッククラスCorsConfigはWebMvcConfigurerを実装します{

    @オーバーライド
    パブリック void addCorsMappings(CorsRegistry レジストリ) {
        レジストリ.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedMethods("GET"、"HEAD"、"POST"、"PUT"、"DELETE"、"OPTIONS")
                .allowCredentials(true)
                .最大年齢(3600)
                .allowedHeaders("*");

    }
}

上記は、クロスドメインの問題を解決するために私が使用した 2 つの方法です。インターネット上でもクロスドメインの問題を解決する方法がたくさん見つかりましたが、どれも複雑でした。自分で試して調べた結果、上記 2 つの方法がうまくテストできました。その時点では、フロントエンドとバックエンドの両方が構成されていました。

ですので、異なる意見やより良い方法がありましたら、遠慮なくご指摘ください。

私はGray Apeです。また次回お会いしましょう!

画像の説明を追加してください

SpringBoot と Vue の相互作用におけるクロスドメイン問題の解決法に関するこの記事はこれで終わりです。SpringBoot と Vue の相互作用に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • SpringBoot+Spring Securityではクロスドメインソリューションを実現できない
  • Springboot 2.4.0 へのアップグレードにおけるクロスドメイン問題の分析と修正
  • Springboot のクロスドメイン問題に対する 3 つの解決策
  • vue+springboot フロントエンドとバックエンド分離プロジェクトにおけるクロスドメイン問題に対するソリューションの分析
  • Springboot クロスドメイン問題の解決
  • SpringBoot クロスドメインソリューション
  • Spring用のいくつかのクロスドメインソリューション

<<:  MySQL関連のツールをいくつかお勧めします

>>:  よく使われる HTML 形式のタグ_Powernode Java Academy

推薦する

Vue3 (III) ウェブサイトホームページレイアウト開発

目次1. はじめに2. 実際の事例1. App.vueを変更する2. レイアウトを調整する3. ジャ...

JavaScript のアンチシェイクとスロットリングの違いと実装

目次1. 手ぶれ補正2. スロットリング3. まとめ序文:フロントエンド開発者には、次の 2 つの要...

Linux mysql-5.6 でルート パスワードをリセットする方法

1. MySQL サービスが起動しているかどうかを確認します。起動している場合は、MySQL サービ...

imgタグ間のスペースの問題の詳細な説明

IMG タグの基本分析 HTML5 では、img タグには 4 つの要素があります。 (1) src...

Nginx 設定場所のマッチング優先順位の簡単な分析

序文Nginx 構成のサーバー ブロック内の場所は、リクエスト URI を一致させるために使用され、...

Vue でシンプルな無限ループスクロールアニメーションを実装する例

この記事では主に、Vue でシンプルな無限ループスクロールアニメーションを実装し、みんなで共有する例...

ウェブページエクスペリエンス: 計画と設計

1. デザインの方向性を明確にする<br />まず、どのユーザーを対象にデザインするのか...

IE6のバグと修正は予防戦略です

元記事:究極の IE6 チートシート: 25 以上の Internet Explorer 6 のバグ...

MySql テーブル、データベース、シャーディング、パーティショニングの知識ポイントの紹介

1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...

Reactフックの長所と短所

目次序文アドバンテージ:欠点: 1. レスポンシブな使用効果2. ステータスが同期されていないRea...

タブ切り替え機能を実装するJavaScriptカスタムプラグイン

この記事では、タブ切り替え機能を実装するためのJavaScriptの具体的なコードを参考までに共有し...

nginx で gzip 圧縮を実装してウェブサイトの速度を向上させる方法

目次gzip 圧縮を使用する理由は何ですか? nginxはgzipを実装するgzip処理nginx ...

MySQL 8.0.12 のインストールと使用方法のチュートリアル

MySQL 8.0.12のインストールと使用のチュートリアルを録画しました。ウィンドウズまず、公式ウ...

HTML/CSS での空白処理とページ内の空白を保持する方法

HTML の空白ルールHTML では、コンテンツ内の複数のスペースは通常 1 つとみなされ、連続する...

Vue の echarts ツールチップにクリック イベントを追加する詳細な説明

目次必要回避策1. ツールチップを設定する2. hookToolTip変数を定義する3. メソッド内...