メモ_Flaskアプリでの簡単なCORS対策

Flaskアプリ側に用意したAPIに Java scriptのfetchでうまくpostできないバグに遭遇して、CORS（Cross-Origin Resource Sharing）というのが原因のようで、以下のような簡単な方法で解決した。

方法:

以下のようにflask_corsを有効にするだけ。もちろん事前にpipなどでinstallが必要

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # CORSを全てのオリジンに対して許可

@app.route('/api/data')
def get_data():
    return {'data': 'Hello, World!'}

if __name__ == '__main__':
    app.run()

Webアプリケーションではなく、webサーバ(ngnix,apache)側からでも対応可能。 Nginxの設定でCORSを有効にするには、以下のように location ブロックにヘッダーを追加すれば良いらしい。

server {
    listen 80;  # ポート80でリッスン
    server_name example.com;  # ドメイン名

    location /api/ {
        # CORSヘッダーを追加
        add_header 'Access-Control-Allow-Origin' '*' always;  # 任意のオリジンを許可
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;  # 許可するメソッド
        add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization' always;  # 許可するヘッダー

        # OPTIONSメソッドの処理
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Max-Age' 86400;  # プリフライトリクエストのキャッシュ時間（秒）
            return 204;  # 204 No Contentを返す
        }

        # 他の設定（バックエンドサービスへのプロキシなど）
        proxy_pass http://backend_service;  # バックエンドサービスのURL
    }
}