More than 3 years have passed since last update.

【Mac】ホットリロードできない時の対処法

Posted at 2021-10-25

環境

・macOS Big Sur バーション11.5.2
・シェル zsh
・Ruby 3.0.2
・rails 6.1.4
・My SQL 8.0.23
・Docker 20.10.8
・react　　17.0.2
・typescript　　4.4.4

Docker+rails+react+typescriptで環境構築し、ホットリロードまでしようとしていました.

①webpacker.ymlのwatch_options:の下に

aggregateTimeout: 300
poll: 500

を追加しました。
こんな感じです。

webpacker.yml

watch_options:
      ignored: '**/node_modules/**'
      aggregateTimeout: 300
      poll: 500

これでできるはずだができず、、、

次に
②.envファイルを作り

.env

CHOKIDAR_USEPOLLING=true

を追記。

これも複数の記事を参考にし実行しましたがホットリロード（リロードなしで即テキストエディタの内容が反映される）はできず。

よってリロード画面を開発者モードで見ることに。
そこでこんなエラーを発見。

Access to XMLHttpRequest at 'http://localhost:3035/sockjs-node/info?t=1635142686037' from origin 'http://0.0.0.0:3000' has been blocked by CORS policy: The request client is not a secure context and the resource is in more-private address space local.

調べるとCORS policyというものでURLがブロックされているとのこと。

chrome://flags/#block-insecure-private-network-requests

以上のサイトにアクセスし、

Block insecure private network requests
をDisabledにする。

↓
無事ホットリロードできました！めでたしめでたし。