初めて始めるときは、誰もがこの問題に遭遇すると思います。インターネットでいろいろ検索しましたが、役に立たず、完全には書かれていません。 ここに記録しておきます。皆さんの参考になれば幸いです 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のパスワードを忘れた場合のベストな対処法の簡単な分析
この記事ではJavaScript検索のデータ表示コードを参考までに共有します。具体的な内容は以下のと...
序文先週、同僚が私に尋ねました。「兄さん、MySQL にバグを見つけました。午後にディスクをクリーン...
1. シナリオ表示Tomcat ログに次の例外情報が時々報告されます。何が起こっているのでしょうか...
この記事では、Linux システム コマンドについて説明します。ご参考までに、詳細は以下の通りです。...
序文この記事では、mysqld プロセスをシャットダウンするプロセスと、MySQL インスタンスを安...
Netease Kanyouxi公式サイト(http://kanyouxi.163.com/)(棚...
1. Dockerfile 内の ENV 命令は、イメージの環境変数を定義するために使用されます。次...
ClickHouse は、オープンソースの列指向 DBMS (Yandex によって開発) です。 ...
インターネット上には、正しい方法であっても、使用しても正しい結果が得られない方法が数多くあります。正...
伝統的な方法は、正方形を固定形式で書くことです。長さ=幅を直接書き、次のように固定値を書きます。 。...
今日、問題が発生しました: MySQL の insert into、update、delete ステ...
Docker コンテナに入った後、コンテナを終了すると、コンテナは Exited 状態に変わります。...
Web ページ エンコーディングは英語では web page encoding と翻訳され、Web ...
SQL は、データを特定の順序で並べ替え、特定のフィールドでグループ化した後、隣接する 2 つのデ...
この記事の例では、Bootstrap FileInputの具体的なコードを共有して、画像アップロード...