Vue+SpringBoot+Shiroのクロスドメイン問題を解決する

Vue+SpringBoot+Shiroのクロスドメイン問題を解決する

初めて始めるときは、誰もがこの問題に遭遇すると思います。インターネットでいろいろ検索しましたが、役に立たず、完全には書かれていません。

ここに記録しておきます。皆さんの参考になれば幸いです

1. Vueフロントエンドを構成する

configの下のindex.jsでプロキシ情報を設定します。

注: ここでのクロスドメイン構成は開発環境でのみ有効です。パッケージ化とデプロイ後、このクロスドメインは機能しません。私は長い間ここで行き詰まっていました。Vueフロントエンドがパッケージ化されたら、nginxにデプロイするのが最善です。nginxを使用すると、クロスドメインの問題を直接解決できます。

1. クロスドメイン構成を開発する

プロキシテーブル: {
'/api': {
ターゲット: 'http://xxxx.com', //AddresschangeOrigin: true,
パス書き換え: {
'^/api': ''
  },
 }
},

main.js で Ajax プロキシ リクエストを構成する

var axios = require('axios')
axios.defaults.baseURL = '/api' // 環境

次に、リクエスト メソッドを記述するときに、メソッドの前に「/api」を追加します。これは、構成名に基づいています。構成した名前を記述します。

このようにして、フロントエンドのVue開発のクロスドメイン構成が完了しました。

2. 本番環境のクロスドメイン構成

まず、コードの構成を見てみましょう

インターネットで、あれこれ修正すべきだ、と書かれた記事や情報をたくさん読みましたが、事実はどれも同じです。 。 。 。

実際、index.jsのconfigの下にあるプロキシ情報を設定するだけで済みます。

プロキシテーブル: {
'/api/*': {
target: 'http://ドメイン名', //本番環境のアドレスにはhttpを追加する必要があります
変更元: true、
パス書き換え: {
'^/api': '/api'
  },
 }
},

上記では、ローカルクロスドメインを構成する際にaxiosのデフォルトのリクエストパスを設定しており、プロダクションパッケージを構成する必要はありません。

これでコードが設定されました。他には何も変更しないでください。次に npm run build を実行すると準備完了です。

残りの作業は nginx に任せることができます。私は Windows サービスに nginx を展開しました。インターネット上にはインストール手順が多数掲載されているので、ここでは詳細には触れません。

nginxをインストールしたら、いくつかの設定を行う必要があります

1. nginxの下のhtmlディレクトリの内容を削除します。

2. Vueパッケージdistをnginxのhtmlディレクトリにコピーします。

3. nginx の下の config ディレクトリで nginx.conf を設定します。設定内容は次のとおりです。

以下に説明があります。nginx アプリケーションのファイルディレクトリ名が変更されています。このディレクトリと同様に、nginx-1.xx で直接インストールします。上の図でルートパスを設定すると、/n でコンパイルの問題が発生する可能性があります。ここでは ProNginx に変更しました。好きな名前に変更できます。

これが私のnginxの設定のすべてです

#ユーザーnobody;
ワーカープロセス 1;

#error_log ログ/error.log;
#error_log ログ/error.log 通知;
#error_log ログ/error.log 情報;

#pid ログ/nginx.pid;


イベント {
    ワーカー接続 1024;
}


http {
    mime.types を含めます。
    デフォルトタイプ アプリケーション/オクテットストリーム;

    #log_format main '$remote_addr - $remote_user [$time_local] "$request" '
    # '$status $body_bytes_sent "$http_referer" '
    # '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log ログ/access.log メイン;

    ファイル送信オン;
    #tcp_nopush オン;

    #キープアライブタイムアウト 0;
    キープアライブタイムアウト65;

    #gzip オン;

サーバー{
        聞く 80;
        server_name フロントエンド サービスのドメイン名/IP;
        ルート D:/HWKJ/ProNginx/ProNginx/html/dist/;
        
        位置 / {
            インデックス index.php index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
            場所 /api/ {
            #書き換え^.+api/?(.*)$ /$1 break;
            #uwsgi_params を含めます。
            proxy_pass http://xxxbackgroundxxxx/api/;
            #springboot でリモート IP を取得する問題を解決する}
    }
}

設定後、nginxを起動します。nginxの操作コマンドをいくつか紹介します。

start nginx // 起動します nginx -s stop // stop は nginx をすぐに停止するため、関連情報が保存されない場合があります nginx -s quit // quit は nginx を完全に規則的に停止し、関連情報を保存します nginx -s reload // 構成情報が変更された場合は、このコマンドを使用して構成を再読み込みします nginx -s reopen // ログ ファイルを再度開きます nginx -v // Nginx のバージョンを表示します

このようにして、フロントエンドのVueプロダクションのクロスドメイン構成が完了します。

次に、Spring Bootの背景を設定します

2. Spring Bootを構成する

Spring Bootのみの場合は、情報を設定できます

org.springframework.boot.SpringBootConfiguration をインポートします。
org.springframework.boot.web.servlet.FilterRegistrationBean をインポートします。
org.springframework.context.annotation.Bean をインポートします。
org.springframework.context.annotation.Configuration をインポートします。
org.springframework.web.cors.CorsConfiguration をインポートします。
org.springframework.web.cors.UrlBasedCorsConfigurationSource をインポートします。
org.springframework.web.filter.CorsFilter をインポートします。
org.springframework.web.servlet.config.annotation.* をインポートします。


/**
 */
@構成
パブリッククラス MyWebConfigurer は WebMvcConfigurer を実装します {

@オーバーライド
   パブリック void addCorsMappings(CorsRegistry レジストリ) {
       registry.addMapping("/**") // クロスドメインアクセスを許可するパス。allowCredentials(true) // クッキーを送信するかどうか
               .allowedOriginPatterns("*") // クロスドメイン アクセスが許可されるオリジン。allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE") // 許可されるリクエスト メソッド。allowedHeaders("*") // 許可されるヘッダー設定。maxAge(168000); // 事前チェック間隔}  
}

Spring Bootバックエンドがshiroと統合されている場合、上記の設定はshiroのリクエストには反映されず、ブラウザは依然としてクロスドメインを要求するので、次の方法を使用してクロスドメインアクセスを設定します。

org.springframework.boot.SpringBootConfiguration をインポートします。
org.springframework.boot.web.servlet.FilterRegistrationBean をインポートします。
org.springframework.context.annotation.Bean をインポートします。
org.springframework.context.annotation.Configuration をインポートします。
org.springframework.web.cors.CorsConfiguration をインポートします。
org.springframework.web.cors.UrlBasedCorsConfigurationSource をインポートします。
org.springframework.web.filter.CorsFilter をインポートします。
org.springframework.web.servlet.config.annotation.* をインポートします。


/**

  */
@構成
パブリッククラス MyWebConfigurer は WebMvcConfigurer を実装します {
    @ビーン
    パブリックフィルター登録Bean corsFilter() {
        最終的な UrlBasedCorsConfigurationSource ソース = 新しい UrlBasedCorsConfigurationSource();
        最終的な CorsConfiguration config = new CorsConfiguration();
        // ドメイン間での Cookie の送信を許可する config.setAllowCredentials(true);
        // #URI がサーバーにリクエストを送信できるようにします。* はすべてが許可されることを意味します。SpringMVC では、* に設定すると、現在のリクエスト ヘッダーの Origin に自動的に変換されます。
        config.addAllowedOriginPattern("*");
        // # アクセスが許可されたヘッダー情報、* はすべてを意味します config.addAllowedHeader("*");
        // 事前チェック リクエストのキャッシュ時間 (秒単位)。つまり、この期間中、同じクロスドメイン リクエストは再度事前チェックされません。config.setMaxAge(18000L);
        // リクエストの送信が許可されるメソッド。* はすべてが許可されることを意味します config.addAllowedMethod("OPTIONS");
        config.addAllowedMethod("HEAD");
        config.addAllowedMethod("GET");
        config.addAllowedMethod("PUT");
        config.addAllowedMethod("POST");
        config.addAllowedMethod("削除");
        config.addAllowedMethod("PATCH");
        ソースを登録します。CorsConfiguration("/**", config);

        FilterRegistrationBean Bean は、新しい FilterRegistrationBean (新しい CorsFilter (ソース)) を作成します。
        // リスナーの優先順位を設定する bean.setOrder(0);

        Bean を返します。
    }
}

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

以下もご興味があるかもしれません:
  • Vue が springboot インターフェースを呼び出す際の 403 クロスドメイン問題を解決する
  • vue+springbootはプロジェクトのCORSクロスドメインリクエストを実装します
  • Vue+springboot フロントエンドとバックエンドの分離により、シングルサインオンのクロスドメイン問題解決を実現
  • フロントエンドとバックエンドを分離する際の Vue+springboot クロスドメインセッション+Cookie 無効化の問題を解決する
  • SpringBoot と Vue の相互作用におけるクロスドメイン問題の解決策

<<:  Ubuntu は scrcpy をインストールして、携帯電話の画面投影と制御を完了します (Ubuntu で QQ WeChat を使用する別の方法)

>>:  MySQL 8のパスワードを忘れた場合のベストな対処法の簡単な分析

推薦する

clearfixとclearの例

この記事では、CSS を理解し始めたばかりの人を対象に、主に HTML で clearfix と c...

Ubuntu 18.04 システムでの Redis および phpredis 拡張機能のインストールと設定の詳細な説明

この記事では、Ubuntu 18.04 に Redis と phpredis 拡張機能をインストール...

デザイン理論:計画、リソース、コミュニケーションの問題について

<br />多くの中小企業ではこの問題は発生しません。中小企業はデザイナーをサポートし、...

テキストエリアの使用に関する注意事項

なぜテキストエリアについて具体的に言及するのでしょうか?なぜなら、textarea ノードは実際には...

Linux での Firewalld の高度な設定の使用に関する詳細な説明

IPマスカレードとポート転送Firewalldは2種類のネットワークアドレス変換をサポートしています...

winx64 での mysql5.7.19 の基本的なインストール プロセス (詳細)

1. ダウンロード参考: https://www.jb51.net/softs/451120.ht...

Ubuntuでネットワークルーティングテーブルを表示する方法

Linux におけるルーティングとルーティング テーブルとは何ですか?ルーティングのプロセスとは、ネ...

HTML メタタグの使用の概要 (推奨)

メタタグ機能METAタグは、HTMLタグのHEAD領域にある重要なタグです。文書の文字セット、使用言...

組み込み Linux 開発環境で ping と nfs を構築するためのソリューション

1. 組み込みソフトウェアレベル 1) ブートローダ -> ブートローダ組み込みシステム全体の...

LeetCode の SQL 実装 (184. 部門内で最も高い給与)

[LeetCode] 184. 部門最高給与従業員テーブルにはすべての従業員が保存されます。すべて...

CSS を使用して同じ親タグの左側と右側に 2 つのボタンを配置する方法

この記事では、主に同じ親タグの左側と右側にある 2 つのボタンの CSS レイアウト方法を紹介し、皆...

テキストの両側に水平線を描くための CSS のサンプルコード

この記事では、テキスト中央の両側に水平線を引く効果を実現する CSS のサンプルコードを紹介し、皆さ...

MySQLでデータを削除してもディスク領域が解放されないのはなぜですか

目次問題の説明解決問題分析問題の説明MySQL で delete ステートメントを使用してデータを削...

Windows での MySQL の使用: 自動スケジュールバックアップの実装

1. バックアップスクリプトを書く 著者:www.yumi-info.com 日付:20171222...