AjaxとFlask間の通信でCORSエラーが発生したとき

クロスオリジンの問題がなかなか解決できなかったのだがようやくわかった。

問題

ローカルホスト環境でFlaskを使ってサーバーを立ち上げた。
そしてJavaScriptを使ってAjaxでGETリクエストを送ったところ、cors error...

以下の設定を追加

@api.after_request
def after_request(response):
    response.headers.add('Access-Control-Allow-Origin', '*') # すべてのオリジンを許可
    response.headers.add('Access-Control-Allow-Headers', 'Content-Type,Authorization') # 使用するヘッダーに応じて追加
    response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS')
    return response

リクエストヘッダーに任意のヘッダーが入っている場合、Access-Control-Allow-Headersに追加する必要がある。
CORSにはセーフリストリクエストヘッダーというものがあり、通信に許可されているヘッダー以外を指定すると制限されるようになっているらしい。

結果

解決できた。
localhost同士の通信でCORSエラーになる原因は、オリジンというのはプロトコル・ドメイン・ポート番号を合わせたものをいうので、ドメインが合っていてもポート番号が違えばCORSエラーになる。