「画像のアップロードに失敗しました」のときのログを開発者ツールから見てみた with ChatGPT

noteで記事を書いていると、たまに表示されるエラー。

「画像のアップロードに失敗しました」

なぜ失敗したのか、何が起きているのか、画面上からは分かりません。が、ブラウザの開発者ツールを使えば、その裏側を少し覗くことができます。今回はその方法と、ChatGPTの協力を得て読み解いた結果をまとめました。

1. エラーが出た状況

記事の編集画面（editor.note.com）で画像をアップロードしたところ、半透明に表示されたまま少しの間固まり、アップロード処理が進まず、「画像のアップロードに失敗しました」というエラーメッセージが表示されました。

2. 開発者ツールを開いてみる

Google Chromeで記事を編集している場合、次の操作で「開発者ツール」が開きます。

• Windows：F12 または Ctrl + Shift + I

• Mac：Cmd + Option + I

その後、Consoleタブを見てみると、以下のようなログが出ていました。

Access to fetch at 'https://note-cakes-web-dev.s3.ap-northeast-1.amazonaws.com/' from origin 'https://editor.note.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. POST https://note-cakes-web-dev.s3.ap-northeast-1.amazonaws.com/ net::ERR_FAILED 303 (See Other)

3. ChatGPTに聞いてみた

このエラーメッセージをそのままChatGPTに送ってみたところ、次のように教えてくれました。

✔ ポイントは「CORSエラー」

このエラーは「CORS（クロスオリジン・リソース共有）」というWebのセキュリティ機能に引っかかったことを意味しています。

• noteの編集画面（editor.note.com）から、

• Amazon S3のバケット（note-cakes-web-dev.s3.ap-northeast-1.amazonaws.com）に

• 画像ファイルを送ろうとしたところ、

• S3側が「外部からのリクエストを受け付けない」設定になっていたため、ブラウザが通信をブロックしたということです。

つまり、これはnoteのサーバ側（またはS3側）の設定ミスであり、ユーザ側の問題ではありません。

4. 「303 See Other」もポイント

ログにはもう一つ、次のような記述もありました。

net::ERR_FAILED 303 (See Other)

これは「別のURLにリダイレクトしようとしたが、そこでも失敗した」ことを表します。リダイレクト先のサーバにもCORS設定が足りていなければ、同じようにブロックされてしまいます。

5. 結論：ユーザにできることはない

開発者ツールでエラーの内容を確認すると、原因はnote側のS3設定（CORS設定）であることが分かりました。これは完全にnote運営側が修正すべき問題であり、私たちユーザが設定で直せるものではありません。

✓ 補足：エラー内容の調べ方

もし同様の現象が起きたら、次の手順で確認できます：

1. 画像アップロードでエラーが出たら F12 で開発者ツールを開く

2. Consoleタブを見る

3. 赤文字のログを見て、CORS や Access-Control-Allow-Origin といった単語があれば、note側の問題である可能性が高い

🔧 対策（開発者向け）

対象のS3バケット（note-cakes-web-dev.s3.ap-northeast-1.amazonaws.com）に、少なくとも以下のようなCORS設定を追加する必要があります。

<CORSConfiguration>
  <CORSRule>
    <AllowedOrigin>https://editor.note.com</AllowedOrigin>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
</CORSConfiguration>

最後に

エラーメッセージが何を意味するのか分かるだけでも、不安が軽くなります。ChatGPTの助けも借りながら、開発者ツールを使ってエラーの裏側をのぞいてみるのも、一つの知的冒険です。

ちなみに、僕自身はネットワークの知識を多少持っているものの、具体的な開発やAWSについての知識は皆無です。

そのため、記載内容には誤りが含まれる可能性があります。正確性については保証できませんので、あらかじめご了承ください。

この記事が面白かったのであれば、スキしてもらえるとうれしいです。

他の記事も見てください！