Skip to content

CORS奮闘記

概要

Basic認証が有効になっているHTTPサーバーに対するCORSは注意が必要

Basic認証が有効になっているHTTPサーバーに対するCORSの流れ

  1. CORS先のサーバーがBasic認証を有効にしていると、Authorizationヘッダーが含まれるxhrを送るまえに、ブラウザがOPTIONSリクエストを送るプリフライト（Preflight）という動作が入る
    • したがって、面倒くさがらずにプリフライトに対するレスポンス用の設定をきちんと設定する必要がある。さもないとハマる
  2. CORS先のサーバーからプリフライトのレスポンスをする
    • この時、レスポンスヘッダ Allow-Control-Headersにワイルドカードだけでなく、明示的に Authorizationヘッダも許可しないとブラウザからのxhrにBasic認証を使ってくれずハマる
  3. CORSのためのxhrをブラウザが送る

上記を踏まえたnginxの設定

Settings for Streamlit Static

map $http_origin $cors_header {
        default "";
        "http://localhost:8000" $http_origin; #デバッグ用。本格運用したら削除したほうが良いかも
        "https://moonshot.labs.basisconsulting.co.jp" $http_origin;
}


server {
    location /app/static {
        alias /home/ubuntu/moonshot-geoplatform/moonshot-data/static;
        add_header Access-Control-Allow-Origin $cors_header;

        auth_basic "MOONSHOT";
        auth_basic_user_file /etc/nginx/.htpasswd-moonshot;

        # preflight対応 (ハマりポイントその1)
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin $cors_header;
            add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
            add_header Access-Control-Allow-Credentials: 'true'; #CORSで認証を使うことを許可（ハマりポイントその2）
            add_header Access-Control-Allow-Headers 'Authorization, *'; #CORSで認証を使うことを許可（ハマりポイントその2）
            add_header Access-Control-Max-Age 300;

            add_header Content-Type 'text/plain charset=UTF-8';
            add_header Content-Length 0;

            return 204;
        }
    }
}