CORS対応まとめ

呪いの言葉

これいつも出くわすと面倒だから、*curse(呪い)*と発音したい。。。

設定方法

例としてアイコンフォントファイルをサブドメインで使い回すとしたら

普通のWebサーバーの場合

.htaccessファイルに以下を記載。

SetEnvIf Origin "^https://(.*)\.YOURDOMAIN\.com$" ACAO=$0
Header set Access-Control-Allow-Origin %{ACAO}e env=ACAO

AWS S3の場合

S3のバケットのアクセス制限、「CORSの設定」を選択

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>Authorization</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Firebase hostingの場合

firebase.jsonのhostingに以下を追加。

"hosting": {
//"public"とか"ignore"に加えて

    "headers": [
      {
        "source": "**/*.@(eot|otf|ttf|ttc|woff|font.css)",
        "headers": [
          {
            "key": "Access-Control-Allow-Origin",
            "value": "*"
          }
        ]
      }
    ]
}

補足（先に断っておくと）

AWSとFirebaseについては、ワイルドカードを使用した条件設定なので、厳密に設定したい場合は別の記事を参考に。

補足2

追加。Alibaba Cloudを用いた例