こんにちは、バグを書くのが本当に得意なプログラマーのグレイ・エイプです。 ブラウザ同一生成元ポリシークロスドメインの問題はなぜ発生するのでしょうか? まず、ブラウザのホモロジー ポリシーである定義を理解する必要があります。 ブラウザの同一生成元ポリシーとは何ですか? 簡単に言うと、ブラウザがリクエストを送信するために使用するプロトコル、ドメイン名、ポートは、サーバーがリクエストを受信するために使用するプロトコル、ドメイン名、ポートと一致している必要があります。これは相互作用を完了する唯一の方法ですが、明らかに不可能であり、特に同じコンピューター上でフロントエンドとバックエンドが分離されたプロジェクトを開発する場合は、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 の前半が同じでなければならないからです (例 注: しかし、クロスドメインの問題を解決するときは、 最初のステップは、統一されたアクセスパスを設定することですaxios.js で、 ステップ2: クロスドメインプロキシを構成するbabel.config.jsと同じディレクトリに新しい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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
>>: よく使われる HTML 形式のタグ_Powernode Java Academy
目次1. はじめに2. 実際の事例1. App.vueを変更する2. レイアウトを調整する3. ジャ...
目次1. 手ぶれ補正2. スロットリング3. まとめ序文:フロントエンド開発者には、次の 2 つの要...
1. MySQL サービスが起動しているかどうかを確認します。起動している場合は、MySQL サービ...
IMG タグの基本分析 HTML5 では、img タグには 4 つの要素があります。 (1) src...
序文Nginx 構成のサーバー ブロック内の場所は、リクエスト URI を一致させるために使用され、...
この記事では主に、Vue でシンプルな無限ループスクロールアニメーションを実装し、みんなで共有する例...
1. デザインの方向性を明確にする<br />まず、どのユーザーを対象にデザインするのか...
元記事:究極の IE6 チートシート: 25 以上の Internet Explorer 6 のバグ...
1. はじめにデータベース内のデータ量が一定レベルに達すると、システムパフォーマンスのボトルネックを...
目次序文アドバンテージ:欠点: 1. レスポンシブな使用効果2. ステータスが同期されていないRea...
この記事では、タブ切り替え機能を実装するためのJavaScriptの具体的なコードを参考までに共有し...
目次gzip 圧縮を使用する理由は何ですか? nginxはgzipを実装するgzip処理nginx ...
MySQL 8.0.12のインストールと使用のチュートリアルを録画しました。ウィンドウズまず、公式ウ...
HTML の空白ルールHTML では、コンテンツ内の複数のスペースは通常 1 つとみなされ、連続する...
目次必要回避策1. ツールチップを設定する2. hookToolTip変数を定義する3. メソッド内...