初めて始めるときは、誰もがこの問題に遭遇すると思います。インターネットでいろいろ検索しましたが、役に立たず、完全には書かれていません。 ここに記録しておきます。皆さんの参考になれば幸いです 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をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Ubuntu は scrcpy をインストールして、携帯電話の画面投影と制御を完了します (Ubuntu で QQ WeChat を使用する別の方法)
>>: MySQL 8のパスワードを忘れた場合のベストな対処法の簡単な分析
この記事では、CSS を理解し始めたばかりの人を対象に、主に HTML で clearfix と c...
この記事では、Ubuntu 18.04 に Redis と phpredis 拡張機能をインストール...
<br />多くの中小企業ではこの問題は発生しません。中小企業はデザイナーをサポートし、...
なぜテキストエリアについて具体的に言及するのでしょうか?なぜなら、textarea ノードは実際には...
IPマスカレードとポート転送Firewalldは2種類のネットワークアドレス変換をサポートしています...
1. ダウンロード参考: https://www.jb51.net/softs/451120.ht...
Linux におけるルーティングとルーティング テーブルとは何ですか?ルーティングのプロセスとは、ネ...
例えば: <link rel="スタイルシート" href="h...
メタタグ機能METAタグは、HTMLタグのHEAD領域にある重要なタグです。文書の文字セット、使用言...
1. 組み込みソフトウェアレベル 1) ブートローダ -> ブートローダ組み込みシステム全体の...
[LeetCode] 184. 部門最高給与従業員テーブルにはすべての従業員が保存されます。すべて...
この記事では、主に同じ親タグの左側と右側にある 2 つのボタンの CSS レイアウト方法を紹介し、皆...
この記事では、テキスト中央の両側に水平線を引く効果を実現する CSS のサンプルコードを紹介し、皆さ...
目次問題の説明解決問題分析問題の説明MySQL で delete ステートメントを使用してデータを削...
1. バックアップスクリプトを書く 著者:www.yumi-info.com 日付:20171222...