トラブルシュート

外部API呼び出しがCORSで失敗するときに相手へ伝える確認依頼の書き方

外部APIがCORSエラーを返すとき、自分では解決できずAPIの管理者や開発担当者に連絡が必要になることがあります。しかし「エラーが出て動きません」とだけ伝えると、相手は何を確認すればいいかわからず対応が遅れます。技術的な文脈を正確に伝える依頼文を書けば、初回のやり取りで解決できる確率が大きく上がります。

よくある原因

依頼文が機能しない最大の原因は「CORSエラーが出ています」という一行だけでは相手に何も伝わらないことです。エラーが起きているオリジン(どのURLから呼んでいるか)、リクエストのHTTPメソッド、送っているヘッダーの3つが揃って初めて、相手側のエンジニアは設定を変更できます。

もうひとつの原因は、自分がどのAPIを呼んでいるのかURLを省略してしまうことです。同じサービスでも複数のエンドポイントが別々のCORS設定を持つことがあります。「https://api.example.com/v2/data というエンドポイントを呼んでいます」と明示することで、相手は確認対象を絞れます。

  • 相手がログインなしで開ける状態か確認する
  • PCとスマホで最低1回ずつ表示を確認する
  • 内部情報・個人情報・不要な外部送信が残っていないか見る
  • レビュー期限と修正時の差し替え方を決めておく

自分側で確認すること

依頼文を書く前に手元で確認しておく情報は3点です。①ブラウザのコンソールに表示されているCORSエラーの全文(コピーしておく)、②NetworkタブでOPTIONSまたは該当リクエストを選んだときの「Request URL」と「Request Headers」、③共有しているHTMLのURL(ギガサイト便のプレビューURL)。この3点を揃えてから依頼文を書き始めます。

また、エラーが自分の環境でのみ再現するのか、共有先でも再現しているのかを確認します。自分の環境でのみ発生する場合はネットワーク環境の問題の可能性もあるため、別のWi-Fi接続や別ブラウザで試した結果も添えると診断が早まります。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

相手側で確認すること

相手のエンジニアに確認してもらいたい内容を依頼文に明記します。具体的には「以下のオリジンからのリクエストを許可するCORSヘッダーを追加していただけますか?」と書き、オリジン(例:https://xxx.gigasite-bin.com)を明記します。また、使用するHTTPメソッド(GET/POST)とカスタムヘッダー(Authorization、Content-Typeなど)も列挙します。

返信に「対応しました」とだけ書かれてきた場合は、どのオリジンを許可したかと、変更が反映されるまでの時間(CDNキャッシュがある場合は数分〜数時間)を確認します。反映待ちの間はブラウザのキャッシュをクリアして再テストしてください。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

再発防止の運用

過去に送ったCORS依頼文をテンプレートとして保存しておきます。「件名:CORSヘッダーの追加依頼 / 本文:オリジン・メソッド・ヘッダー・エラー全文・確認環境」という構成にしておけば、次回は必要事項を埋めるだけで送れます。Notionやスプレッドシートに「API名・依頼日・許可オリジン・担当者」を記録すると管理しやすくなります。

複数のAPIサービスを使うプロジェクトでは、公開URLが変わるたびに各サービスへ再連絡が必要になる場合があります。固定の独自ドメインを取得してギガサイト便にCNAMEで紐づけると、URLが変わってもオリジンが固定されるため、許可リストの更新頻度を最小化できます。

  • HTML内の外部script・form action・iframeを確認する
  • APIキーやトークンらしき文字列がないか検索する
  • 画像・CSS・JSのパスが公開後も解決できるか見る
  • noindexと認証を混同せず、必要なら両方設定する

よくある質問

英語のAPIサービスへCORS依頼を送るとき、どう書けばよいですか?

件名は「Request to add CORS allowed origin」、本文には「Could you please add [your origin URL] to the CORS allowed origins? We're calling [endpoint URL] with [method] and [headers].」と書くと明確です。エラーメッセージも引用します。

APIサービスがセルフサービスのダッシュボードを持っている場合、依頼文は不要ですか?

ダッシュボードで自分で設定できる場合は依頼文は不要です。ただし設定変更後、反映まで数分かかるサービスもあるため、変更後はブラウザキャッシュをクリアしてから動作確認します。

依頼を送ってから何日経っても対応されない場合はどうすればよいですか?

サポートチャットやIssueトラッカーでエスカレーションします。それでも動かない場合は、Cloudflare Workersなどのサーバーサイドプロキシを自前で立てて、CORS制約を回避する構成に切り替える方が確実です。

関連記事

トラブルシュート

外部API呼び出しがCORSで失敗するときの原因と直し方

外部APIへのfetchがCORSエラーで弾かれて困っている開発者・制作者向け。ブラウザ側とサーバー側それぞれの原因と、プリフライトリクエストの仕組みを踏まえた具体的な修正手順を解説します。

5分で読める
「トラブルシュート」の記事をもっと見る →