まずコンソールでエラーの種類を読む
データが出ないときは、ブラウザの開発者ツールのコンソールとネットワークタブを必ず開きます。エラー文に CORS や Access-Control-Allow-Origin という文言があればCORS、401や403でキー関連のメッセージならAPIキー、Mixed Content や insecure とあればHTTPS混在の問題、と当たりがつきます。
リクエストが赤くなってステータスが返っていないのか、ステータスは返っているがデータが空なのかでも切り分けられます。まずは推測せず、エラー文をそのまま読むのが近道です。
CORS: ブラウザがブロックしている
CORSは、あるドメインのページから別ドメインのAPIへブラウザがアクセスする際の安全装置です。APIサーバーが「このドメインからのアクセスを許可する」というヘッダー(Access-Control-Allow-Origin)を返していないと、ブラウザがレスポンスを遮断します。これはサーバー側の設定の問題で、フロント側のコードだけでは回避できません。
対象APIがブラウザからの直接呼び出し(CORS)に対応しているかをドキュメントで確認してください。対応していない場合は、自前のサーバーや関数を経由してAPIを呼ぶ構成にするのが正攻法です。
なお、curlやサーバー側スクリプトからは成功するのにブラウザからだけ失敗するなら、まずCORSを疑うのが定石です。
- エラーに Access-Control-Allow-Origin が出る → CORS
- サーバーからは成功、ブラウザからだけ失敗 → CORS の可能性大
- APIがブラウザ直叩きに対応しているかドキュメントで確認
- 未対応なら中継のサーバー/関数を挟む
症状別チェック表
外部APIが呼べない・データが出ないは、症状を分けずに直そうとすると原因探しが長引きます。まず「自分だけで起きるのか」「全員で起きるのか」「特定ブラウザだけか」「差し替え後だけか」を切り分けます。
確認順序を固定すると、相対パス、ファイル名、キャッシュ、認証、外部読み込みのどこで止まっているかが見えます。修正後はローカル確認だけで終わらせず、実際の共有URLで再表示して、相手と同じ条件で直ったことを確認します。
- 自分だけ表示されない: キャッシュ、ログイン状態、ブラウザ拡張、端末幅を確認する
- 全員で表示されない: ファイル構成、相対パス、大文字小文字、アップロード漏れを見る
- 一部だけ崩れる: CSS/画像/JSごとに読み込みエラーを分ける
- 差し替え後だけ古い: URL、キャッシュ、更新対象ファイルの取り違えを確認する
APIキー: 認証で弾かれている
401や403が返るときは認証まわりを疑います。キーの貼り間違い、ヘッダー名やパラメータ名の誤り、キーの利用上限超過、対象APIの未有効化などが典型です。エラーレスポンスの本文に理由が書かれていることが多いので確認してください。
重要な注意として、公開ページのJavaScriptに書いたAPIキーは閲覧者に見えてしまいます。秘密にすべきキーをフロントに直書きしないでください。表に出せないキーは、サーバー側でリクエストを中継し、そこでキーを付与する設計にします。
HTTPS: 混在コンテンツで遮断
ページが https で配信されているのに、http のAPIを呼ぶと、ブラウザが混在コンテンツ(Mixed Content)として遮断します。APIのエンドポイントを https に変更するか、https対応のエンドポイントを使ってください。
逆に、ローカルでファイルを直接開いた状態(file://)だと、httpsを前提にしたAPIや認証が正しく動かないことがあります。本番に近い条件はhttpsで配信して初めて再現できます。
切り分けの手順
原因が分からないときは、次の順で確認すると効率よく特定できます。
- 開発者ツールのコンソールとネットワークタブを開き、エラー文とステータスを確認する
- 同じリクエストを curl などブラウザ外から実行し、成功するか試す(成功すればCORSの疑い)
- ステータスが401/403ならキーとヘッダーを見直す
- Mixed Content が出ていればAPIのURLをhttpsにする
- ローカルファイルで試している場合はhttps配信に切り替えて再確認する
https環境で確認するには
CORSもHTTPS混在も、実際にhttpsで配信されるページ上でしか正しく再現できません。ローカルのfile://では本番と挙動がずれます。
ギガサイト便にHTMLをドロップすると 〇〇.giga-site.com のhttpsの共有URLが発行され、固定のサブドメイン上でAPI呼び出しの挙動を確認できます。コードを直したら同じURLのままファイルを差し替えられるので、ドメインを変えずに何度も検証できます。検証用ページを関係者に見せたくない場合は、パスワードやメール認証を併用してアクセスを絞れます。
よくある質問
ブラウザからだけAPIが失敗します。CORSですか。
その可能性が高いです。curlやサーバー側から同じリクエストが成功するのにブラウザからだけ失敗する場合、サーバーがCORSヘッダーを返していないのが原因です。APIがブラウザ直叩きに対応しているか確認し、未対応なら中継サーバーを挟んでください。
401や403が返ります。
認証エラーです。APIキーの貼り間違い、ヘッダー名の誤り、利用上限超過、API未有効化などが典型です。エラーレスポンスの本文に理由が書かれていることが多いので確認してください。
APIキーをJavaScriptに書いても安全ですか。
公開ページのJavaScriptに書いたキーは閲覧者から見えます。秘密にすべきキーは直書きせず、サーバー側でリクエストを中継してそこでキーを付与する設計にしてください。
Mixed Content というエラーが出ます。
httpsのページから httpのAPIを呼んだときに出る遮断です。APIのエンドポイントをhttpsに変更してください。確認はhttpsで配信される環境で行うと、本番と同じ条件を再現できます。
原因が分からないときはどこから確認すべきですか？
まず自分だけの問題か全員の問題かを分けます。次にシークレットウィンドウ、別ブラウザ、スマホで確認し、ファイル構成・相対パス・キャッシュ・認証設定を順に見ます。