Chromeブラウザ設定の新バージョンではクロスドメイン実装が可能

Chromeブラウザ設定の新バージョンではクロスドメイン実装が可能

序文

現在、フロントエンドは主に webpack の devServer の構成を通じてクロスドメインの問題を解決しています。しかし、開発環境で devServer が構成されておらず、バックエンドでクロスドメインが設定されていない場合があります。フロントエンドとバックエンドが分離されたプロジェクトでコードをローカルにデバッグする場合、クロスドメインの問題が発生することがよくあります。この記事は主に、クロスドメインブラウザアクセスソリューションに関する前回の記事を補足するものです。この記事の最後の設定は Chrome に関するもので、現在の設定では機能しないため、記事を更新して修正しました。

--disable-web-security が機能しない問題の解決策

前回の記事では、Windows、Mac、Linux などの --disable-web-security の設定方法を紹介しましたが、Chrome の新バージョンではセキュリティポリシーがアップグレードされており、この開き方や前回の設定方法は無効になっています。それで、どうやって解決するのでしょうか?

1. クロスドメインを設定するには、Chrome ショートカットを右クリックし、「プロパティ」、「ショートカット」の順にクリックし、「ターゲット」パスの末尾のスペースを押して、次のコードを追加します。

--args --disable-web-security --user-data-dir=D:\HaoroomsChromeUserData

または

--disable-web-security --user-data-dir=D:\HaoroomsChromeUserData

D:\HaoroomsChromeUserData は私が偶然見つけたフォルダです。自由に設定できます。このように記述しないと、ブラウザの新しいバージョンで設定が反映されない問題が発生する可能性があります。

この方法は、ユーザーが自分のコンピューターにプライベート Chrome ブラウザを作成するのと同じであり、その中の設定と構成はすべてプライベート設定になります。このとき、Chrome のインストール ソース ディレクトリを見つけて、chrome.exe を開きます。プライベート Chrome で設定されているすべてのブックマーク、オプションなどがこの Chrome には含まれていないことがわかります。

注意: D:\HaoroomsChromeUserData を削除する場合は、まずブックマークやアカウントのパスワードなどをバックアップしてください。削除すると、パソコン内のプライベートChromeをアンインストールするのと同じになり、データは保持されません。

2. 設定が成功したら、ブラウザを再度開くと次のプロンプトが表示されます。

「サポートされていないコマンドラインフラグ --disable-web-security を使用しています。これにより、安定性とセキュリティが低下する可能性があります」

この時点で、通常のユーザーは、ローカルフロントエンドプロジェクト、直接接続テスト、オンライン環境インターフェースなどのクロスドメインアクセスを実行できます(現在のブラウザでターゲット環境にログインしており、現在のアカウントのCookie、セッション、その他の情報がすでに存在していることが前提です)。

3. 一部のユーザーは依然としてシステムにアクセスできません。 この場合、コンソールに黄色のテキストが表示されます。

'...Cookie をクロスサイトに送信する場合は、SameSite=None と Secure を指定します...'

現時点では、ブラウザは依然として Cookie へのクロスドメイン アクセスを制限しているため、一部のユーザーのコンピューターでは依然としてクロスドメインを使用できません。

解決:

アドレスバーに入力してください:

chrome://フラグ

再検索:

SameSiteのデフォルトのCookie

「SameSite のデフォルトの Cookie」と「SameSite のない Cookie は安全でなければなりません」を見つけます。その後ろにドロップダウン ボックスがあります。両方のオプションで「無効」を選択します。ブラウザに赤いメッセージが表示されます:「警告: 実験的な機能を使用しようとしています!」 '

警告を無視することを選択します。この時点で、ブラウザはローカルで作成した D:\HaoroomsChromeUserData です。右下隅の [再起動] ボタンをクリックすると、ブラウザが自動的に再起動し、現在開いているすべてのページが保持されます。

注意: このモードは共同デバッグに使用されます。他のショッピング Web サイトにアクセスする場合は、不要なトラブルを回避するために、chrome.exe インストール ソース ディレクトリにある chrome.exe を使用することをお勧めします。

その他のシステム:

MacもLinuxと同様です。独自のコマンドラインは動作しません。クロスドメイン効果を実現するために、データを格納するフォルダも指定します。

その他の解決策

一時的な解決策は、Chrome プラグインを使用することで実現できます。

Chrome拡張機能を検索

許可制御許可オリジン: *

プラグインをインストールしたら、そのドキュメントを読んで、ドメイン間でアクセスできるようにアドレスを設定します。

これで、クロスドメイン実装を可能にするために Chrome ブラウザの新しいバージョンを設定する方法についての記事は終了です。クロスドメインを可能にする Chrome に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<:  Linux ホスト名設定の詳細な紹介

>>:  Vuex のコアコンセプトと基本的な使用法の詳細な説明

推薦する

Linux の vsftpd サービス構成の簡単な分析 (匿名、ユーザー、仮想ユーザー)

vsftpd の概要vsftpd は「very secure FTP daemon」の略称で、セキ...

MySQL コード実行構造例の分析 [シーケンス、分岐、ループ構造]

この記事では、例を使用して MySQL コード実行構造について説明します。ご参考までに、詳細は以下の...

CentOS 7 に PHP5 用の suPHP をインストールする方法 (Peng Ge)

デフォルトでは、CentOS 7 上の PHP は apache または nobody として実行さ...

iframe テクニックを使用して訪問者 QQ 実装のアイデアとサンプル コードを取得する

今日、仕事中に、一時的に追加した友人から、Web ページを使用して訪問者の QQ を取得する方法を尋...

Vue スキャフォールディング プロジェクトを作成するための詳細な手順

vue スキャフォールディング -> vue.cli大規模で完全に機能する Vue プロジェク...

Docker コンテナのデプロイの試み - マルチコンテナ通信 (node+mongoDB+nginx)

その理由はモッカー プラットフォームを導入したかったので、友人の勧めで既成のプロジェクト api-m...

Vue はスクロール可能なポップアップウィンドウ効果を実装します

この記事では、スクロール可能なポップアップウィンドウ効果を実現するためのVueの具体的なコードを参考...

Linux MySQL ルートパスワードを忘れた場合の解決方法

MySQL データベースを使用する際、何らかの理由で長期間 MySQL にログインしていない場合、ま...

MySQLリモートアクセスの設定方法をステップバイステップで説明します

序文MySQL データベースを使用する場合、クライアントはデータベース サーバーにリクエストを送信す...

jsは古典的なマインスイーパゲームを実装します

この記事の例では、古典的なマインスイーパゲームを実装するためのjsの具体的なコードを参考までに共有し...

ElementUI の this.$notify.close() 呼び出しが機能しない問題の解決方法

目次要件の説明問題の説明問題分析問題解決質問の拡張要件の説明このプロジェクトでは、まずユーザーが質問...

CSSページ下部固定を実現する8つの方法の詳細な説明

ページを書いているときに、ページの内容が小さくてフッターがページの真ん中に留まってしまうといった状況...

MySQLに挿入する前にデータが存在するかどうかを確認する方法

ビジネスシナリオ: 訪問者の訪問状況を記録する必要があるが、繰り返し記録することはできない挿入する前...

Vueでのバスの使用に関する詳細な説明

Vue バス メカニズム (バス) vuex を使用するだけでなく、vue 内の親子以外のコンポーネ...

IDEA の Docker プラグインを介して Springboot プロジェクトを公開する方法の詳細なチュートリアル

1. Dockerfileを書く(1)プロジェクト名を右クリックして新しいテキストファイルを作成し、...