JavaScriptでコールするAPIの中身を書き換えて表示を確認したいとき、Charlesでプロキシしてやると便利だ。
ただし、APIのドメインがウェブサイトと違うなど、オリジンが違う場合にはレスポンスヘッダを書き換えてやる必要がある。
でないと、CORSエラーが出てJavaScriptがアクセスできない。
具体的には、Access-Control-Allow-Origin:*を追加する。アクセス許可するオリジンを指定するヘッダだ。
こちらの記事が端的にまとまっていて良い。
Charlesで本番のAPIレスポンスを書き換える（SSL,CORS対応版）
だが、これだけではCORSエラーが消えなくて困った。
よく見るとこんなエラー文言がコンソールに出ていた。
Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
CORSなAPIアクセスの場合、ブラウザは予めプリフライトリクエストと呼ばれるリクエストを飛ばして、正しくCORSできるかどうか確認する。
その際、リクエストヘッダーに含まれるContent-Typeが、レスポンスヘッダーのAccess-Control-Allow-Headersで許可されている必要があるらしい。
Access-Control-Allow-Origin:*だけではダメだったのだ。
Access-Control-Allow-Headers:Content-Typeも追加しよう。