ローカル環境で動作したアプリをHeroku上にデプロイして、Chrome上で動作を確認しようとしたのですが、Vueのコンポーネントが一つも読み込まれませんでした。(おそらくVueのインスタンス自体が読み込まれていない?)
Herokuには取得したドメインを設定していたので、Herokuのドメインの方である~.herokuapp.comの方へアクセスしたのですが、こちらはVueのコンポーネントは読み込まれますが、axiosを使ってデータを入手するところでコンソールに
...blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.(一部省略)
と表示されデータが読み込まれませんでした。
Chrome以外のEdge、Safariではローカル環境と同じ動作をします。
Chrome上でも同じように動作させたいのですが、どのような修正を行えばいいでしょうか?
試したこと
・Chromeのコンソールを独自ドメインの方で確認しましたが、何も表示されていませんでした。Herokuのドメインでは上記のエラーが出力されます。
・アプリにはbootstrap4も使っているのですが、dropdown-menuがChrome上で作動しないことが確認できました。Edgeでは動作確認できます。
↓
JavaScriptが読み込まれていないのではないかと考え、public/jsにconsole.log('hoge')と書いたプログラムを作り、これをscriptタグで読み込ませるとChromeのコンソールだけでなくEdgeのコンソールでも何も表示されませんでした。
Chromeで読み込まれないのはわかりますが、Edgeで読み込まれていないのは理解できなかったので、念のためVueコンポーネントのcreatedフックにconsole.log('hoge')を書き込み、npm run prodを打ち、heroku上にプッシュしました。
その後、再度Chrome、Edgeでサイトを確認すると、どちらもコンソールに何も表示されていませんでした。
どちらのブラウザでも読み込まれないならjavascriptのバージョンが原因か、などの想像もつくのですがEdgeでは動いている以上、原因の検討がつきません。EdgeではVueは読み込めているのにVueコンポーネントに書き込んだconsole.logが動かないのは何故なんでしょうか...
ローカル環境ではきちんとhogeが二回表示されています。
・console.logを書き込んだ状態で~.herokuapp.comのドメインでアクセスするとChrome、Edgeの両方でhogeが表示されていました。また、どちらのブラウザもaxiosのエラーログが出力されます。
↓
DNSの設定が間違っているのかと考えたので、独自ドメインを設定した方法を書いておきます。
お名前.comでhoge.comを取得したものとします 1.HerokuのAdd domainでwww.hoge.comを追加。(HerokuのプランはFreeです) 2.お名前.comのDNSレコードのCNAMEにwww.hoge.com、値には1で表示されたDNSTargetを設定。
こうすることでwww.hoge.comでアクセスするとお名前ドットコムのネームサーバーがHerokuのネームサーバーに名前解決を任せるので、結果www.hoge.comのurlでサイトにアクセスできるものだと考えています。
ですが、サイトの挙動をみるにここの設定が怪しそうなので、もしここの解釈が間違っていたらご指摘ください。
追記
直っちゃいました。。。
Chrome、Edge、Safariのすべてで正常な動作を確認できました。キャッシュが消えた?いや、そもそもChromeではjavascript自体読み込まれていなかったわけで...。
とにかく理由はわかりませんが、時間経過で直りました。
この現象について納得できる回答があればベストアンサーとさせていただきます。
自己解決で時間解決と書くと同じ悩みを抱えた人が腑に落ちないと思うので。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。