CORS設定のメモ

最近、ブログのフォントをいじっていて、最終的にウェブサイトのフォントとしてこれらのフォントを選びました ~~なぜか言葉が回りくどい~~

方正兰亭纤黑
方正粗金陵
Times New Roman
Times
serif

問題が発生しました。方正のウェブサイトでフォントのライセンスを取得すると、非商用ライセンスになります。私の使用目的は非商用ですが、リスクを減らすためにフォントとプロジェクトを分けることにしました (怖いです.jpg)。

えーと、フォントをテーマに組み込まないと、どうやってフォントを使えばいいのでしょうか？オンラインのフォント CDN にも方正のフォントはほとんどありません...

最終的には、フォントをリソースサーバー cdn.6-d.cc に置きました。画像などの外部リンクもすべてそこに置いて、フォントは https://cdn.6-d.cc/font/ に置きました。F12 キーを押してネットワークを確認してリロードすると、cdn.6-d.cc から 2 つの拡張子が ttf のリソースが読み込まれていることがわかるはずです。

CORS の設定#

事はそんなに簡単ではありません。他のドメインからの参照は、Same-origin policy (同一オリジンポリシー)と呼ばれるブラウザのセキュリティポリシーによって制限されます。しかし、この制限を回避する方法があります。それが Cross-origin resource sharing (CORS 跨来源资源共享) という技術仕様で、ヘッダーを追加することでリソースのクロスオリジン呼び出しを行うことができます。ちなみに、この技術仕様はリソースの呼び出し範囲を制限することもできます。私は方正の法務チームにぶつかりたくないので (~~逃げる~~)。

具体的な設定は以下の通りです。

location /font {
    set $cors_origin "";
    if ($http_origin ~* "^https://blog.lvcshu.com$") {
            set $cors_origin $http_origin;
    }
    if ($http_origin ~* "^https://johnpoint.github.io$") {
            set $cors_origin $http_origin;
    }
    if ($http_origin ~* "^https://lvcshu.netlify.com$") {
            set $cors_origin $http_origin;
    }
    if ($request_method = 'OPTIONS') {
    return 204;
    }
    add_header Access-Control-Allow-Origin $cors_origin always;
    add_header Access-Control-Allow-Headers "Content-Type, Authorization" always;
    add_header Access-Control-Allow-Methods "GET, POST, OPTIONS, PUT, PATCH, DELETE, HEAD" always;
    add_header Access-Control-Max-Age 86400 always;
}

CSS の変更#

しかし、テーマのプロジェクトの CSS に私の URL をハードコードすると、上記のドメイン制限が効かなくなります。他の人を誤解させるわけにはいかないので、プロジェクトの CSS からフォントの宣言を削除しました。フォントを正しく読み込むには、all.css に次の行を追加するだけです。

@font-face{font-family:"FZJL";src:url('フォントのURL')}
@font-face{font-family:"FZLT";src: url('フォントのURL')}

これで効果があります