Proxyman で CORS ポリシーを回避する方法

この記事では、ウェブサイトやモバイルアプリ（iOS・Android）の開発中に CORS（Cross-origin resource sharing）を回避する方法を解説します。

アプリ開発中に CORS ポリシーを回避する方法

CORS は、追加の HTTP ヘッダーを使って、どのドメインから制限付きのリソースにアクセスできるかをブラウザーに伝える仕組みです。CORS の詳しい技術ドキュメントは MDN で読めます。

次のような場合に発生することがあります。

localhost で動いているウェブサイトから本番のエンドポイントにアクセスする
iOS / Android の開発中のアプリが本番のエンドポイントにアクセスする

次のようなエラーが表示されることがあります。

Access to fetch at https://your-production-endpoint.com from origin http://localhost:8080 has been blocked by CORS Policy.

出典：Rodrigo Fernández

CORS を回避する方法

CORS の仕組みを回避する簡単な方法は、レスポンスに特定の HTTP ヘッダーを挿入することです。

デバッグに Proxyman を使っている場合、解決方法はいくつもあります。Scripting Tool または Map Local Tool を使えば、簡単に実現できます。

Scripting Tool

Scripting Tool を使うと、条件に一致するリクエストまたはレスポンスに任意のヘッダーを挿入できます。

作業中のすべてのレスポンスに CORS ヘッダーを挿入できる、便利なツールです。

ドメインに対するマッチングルールを作成します。Scripting のマッチングルールには、http://localhost:8080 や https://dev.mydomain.com などを指定できます。
スクリプトを設定し、レスポンスに Access-Control-Allow-Origin ヘッダーを挿入します。

///
/// This func is called if the Response Checkbox is Enabled
/// You can manipulate the Response Data here before it goes to the client
/// Ex: Add/Update/Remove: headers, statusCode and body (json, plain-text)
/// Use console.log(response) to see all available fields
///
function onResponse(context, url, request, response) {
  
  // Allow all
  response.headers["Access-Control-Allow-Origin"] = "*";

  // Done
  return response;
}

Map Local File

Map Local File を使っても、CORS を回避できます。

選択中のフローから、または新規に Map Local のルールを作成します。
URL を対象とするルールを設定します。
Header セクションに Access-Control-Allow-Origin: * を追加します。

HTTP/1.1 200 OK
Content-Type: application/json; charset=utf-8
Access-Control-Allow-Origin: *

{
  "status": "ok"
}

Map Local Directory

ローカルディレクトリをマッピングしている場合は、Map Local と Scripting Tool を組み合わせることで実現できます。

Map Local Directory を正しく設定します。次の手順に進む前に、マッピングが正しく行われていることを確認してください。
同じ URL に一致する Scripting ルールを作成します。
レスポンスに Access-Control-Allow-Origin ヘッダーを挿入します。

///
/// This func is called if the Response Checkbox is Enabled
/// You can manipulate the Response Data here before it goes to the client
/// Ex: Add/Update/Remove: headers, statusCode and body (json, plain-text)
/// Use console.log(response) to see all available fields
///
function onResponse(context, url, request, response) {
  
  // Allow all
  response.headers["Access-Control-Allow-Origin"] = "*";

  // Done
  return response;
}

ドキュメント

詳しくは、以下のドキュメントをご覧ください。

Scripting Tool: https://proxyman.com/docs/scripting/script
アドオンとスニペットコード：https://proxyman.com/docs/scripting/addons
Map Local: https://proxyman.com/docs/advanced-features/map-local

重要：テスト目的でのみ使用してください

Proxyman でレスポンスを書き換えると、ローカルでの作業は続けられます。ただし、実際のユーザーに対してサーバーが修正されるわけではありません。本番サーバーでは、アプリに必要なオリジン、メソッド、ヘッダーだけを許可するべきです。ブラウザーが OPTIONS のプリフライトリクエストを送信する場合は、そのレスポンスにも適切な CORS ヘッダーが含まれていることを確認してください。認証情報や非公開データが関係する場合は、Access-Control-Allow-Origin: * を使わないでください。

Proxyman は高性能な macOS アプリで、iOS デバイス、iOS シミュレータ、Android デバイス上のアプリやドメインからの HTTP/HTTPS リクエストをキャプチャ・検査できます。

ダウンロード：https://proxyman.com

Noah Tran

2020年8月31日