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

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

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

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

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

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

（１）ブラウザリクエストが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 に等しい場合にのみ送信されます。

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

Vue でクロスドメイン問題を解決するのは実はとても簡単です。ブラウザがリクエストを送信するたびに、URL の前半が同じでなければならないからです (例http://localhost:8080/blogsとhttp://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 をよろしくお願いいたします。

以下もご興味があるかもしれません: