Netlify における CORS 対応

Netlify における CORS 対応は「アクセスされる側」と「アクセスする側」のどちらでもできる。

Netlify がアクセスされる側の場合

たとえば、JSON をホスティングして API として使っている場合など。

netlify.toml に次の記述を追加することによって解決できる。 "*" の部分は必要なら特定の origin を指定する

[[headers]]
  for = "/*"
    [headers.values]
    Access-Control-Allow-Origin = "*"

参考: Access-Control-Allow-Origin Policy

Netlify がアクセスする側の場合

たとえば、Netlify で SPA をホスティングして、そこから別サーバにアクセスする場合など。

アプリケーション側で CORS 対応するには、通常であればプロキシサーバを利用するのだけど、今回はサーバの代わりに Netlify Functions を使うことによってプロキシを実現する

参考: Netlify Functions を使って CORS エラーを回避する