9
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

API叩きすぎ? 200なのにCORSが返る

Last updated at Posted at 2024-09-01

起きたエラー

チーム開発中、郵便番号検索APIを利用して、データの取得を行っていたが、
急にデータを取得出来なくなった。

ステータス200が返っているのに、CORSが表示され正常レスポンスで取得できるデータが取れない...:dizzy_face:

解消法

これまでのコード

const res = await fetch('https://example.com/api/json');



【間違い】
headerを追記したコード
【正解】
サーバーの応答時に Access-Control-Allow-Origin を含めることを認識させる

- const res = await fetch('https://example.com/api/json');

+  const res = await fetch('https://example.com/api/json', {
+   header: {
+     'Access-Control-Allow-Origin': '*',
+  },
+})

原因

異なるオリジンAPIを叩いたから

色々検索して記事読んでみたけど、難しい..
クライアント側だったりサーバー側だったりっていうのをきちんと理解していない今。
(その辺の根本の理解足りてない。。)

おまえ敵か!?って疑われたって認識で合ってるかな?

参考サイト




エラーになったから得られる知識でした

9
4
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?