CORS対応まとめ

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については、ワイルドカードを使用した条件設定なので、厳密に設定したい場合は別の記事を参考に。