Zenn
📌

Nuxt3でuseFetchを使う際に困った話

に公開
tech

今回は Nuxt3 で詰まった部分・困った部分を紹介します。
内容はuseFetchです。

useFetch での CORS エラー(開発環境)

Nuxt の use~シリーズで頻出なのがuseFetch。最近作ったポートフォリオに Zenn の記事一覧を載せようと思い、Zenn dev API の記事と useFetch のドキュメントを読みいざコードを書いてみると...

なんかエラーを吐きました。リロードするとエラーは消えるのですが、コードを書いて保存するとまた同じエラーが。

まずはGoogle AI Studioに聞いてみました。すると

1. Zenn APIのCORS対応を待つ (理想的だが、実現するとは限らない):

いきなり非現実的な回答をしてきました。ほかにも解決策をいくつか提示してはくれたものの、結局解決には至らず...。

解決 ... ?

いろいろどっこいしょあって、ついに原因がわかりました。

useFetch は通常サーバーサイドで fetch して値をクライアントサイドに渡すので CORS のエラーは回避するが、ホットリロードされると fetch がクライアントサイドで行われてしまい CORS に引っかかるから。

まさかの仕様。どうすればいいんだ...。
しかし調べてみると、回避できる方法があるらしい。

解決。

その方法とは、server/api ディレクトリに API ルートを作成するというもの。
たしかに、プロジェクト直下にserverというフォルダがありました。

server/api/zenn.ts
import { defineEventHandler } from "h3";

export default defineEventHandler(async (event) => {
    const username = getQuery(event).username;
    const url = `https://zenn.dev/api/articles?username=${username}`;
    const response = await fetch(url);
    return await response.json();
});

server/apiに上記のようなコードを設置し、それをコンポーネントで呼び出す。
これが一般的な解決策のようです。

結論

server ディレクトリの使用方法を学びました。
本番環境で同じエラーを吐いたらどこかしらミスがあるのでしょうが、開発環境では useFetch を使用している fetch のエラーについては少し寛容になる必要があるかもしれません。

Author: uyuyu

GitHubで編集を提案

Discussion