NetlifyのCORSエラーを無くす方法

2022年11月23日

Javascript テクノロジー

eyecatch 簡易にテストを見せるだけのサーバーを全てNetlifyに以降してみた、ユゲタです。 サーバーの運用管理って、正直面倒くさいです。 (楽しいという反面の気持ちもありますが・・・) だって、自分で構築したサーバーだと、sslこう更新やら、osやらモジュールのアップデートやら、ログ管理やら、サーバー負荷監視やら・・・ 初心者だったら、絶対に心折れるのは間違いないでしょう。 (これからサーバー学習始める人はこの箇所読まないでください) 最近だと、AWSやGCPなどのクラウドサーバーで色々と楽になる箇所もあるかもしれませんが、自分で作ったサービスのサンプルを乗っけるだけのサーバーを手軽に準備できるNetlifyが、今の所最強に使いやすいと感じています。

Netlifyって何ぞ?

ベタ褒めしている、Netlifyってどんなサービスかというと、以下のとおりです。

サービスURL

https://www.netlify.com/

概要

Netlifyってどんなサービスかというのを、一言で言うと、「静的なホームページを表示させるサービス」という事ですね。 静的なホームページというのは、CGIを使わないという事ですが、HTML+CSS+Javascriptは問題なく使えるので、ユゲタのよく推奨するカンタンなホームページ制作であれば、全くもって問題なく公開できてしまいます。

個人的感想

これまで、何かwebツールを作ったら、その都度サブドメインを作って、DNSをセットして、サーバーの準備をして公開して、SSLを適用して、3ヶ月毎に更新して・・・みたいなことをやっていたんですが、最初に準備しておけば、全く運用手間いらずというのも魅力の一つです。 もちろん、アクセス上限値もあるので、爆発的にアクセスされるようなホームページは、有料版を使うことになりますが、ちょっとしたサンプルサイト程度であれば、無料で運用できてしまうのも嬉しいですよね。

問題発生

そんな便利なNetlifyで、ブログ用に作ったjavascriptのツールを設置したところ、CORSエラーが発生してしまいました。 ありゃ、たしかに、ブログドメインとNetlifyドメインが違うので、エラーになるのは分かります。 これまで、CORSエラーは、受け側のサーバーに Access-Control-Allow-Origin : * をセットするだけでよかったのに、Netlifyってサーバー設定をどうすればいいのか分からなくて調べて、解決した方法を紹介したいと思います。

CORSエラー解決編

まず次のファイルをroot階層に設置します。 [[headers]] for = "/*" [headers.values] Access-Control-Allow-Origin = "*" netlify.tomlというファイルは、Apacheで言うところの、.htaccessのようなものだと考えるとわかりやすいでしょう。 これで、本番にデプロイしたら、CORSエラーが無くなりました。 非常にスッキリ!! 天気もいいし、なんて気持ちのいい朝なんだ。 こんなに簡単に、物事が解決すると、今日はなんかいい事ありそう・・・