Access to fetch at ‘https://xxx from origin ‘https://yyy has been blocked by CORS policy

Post Author
By pitang1965
Post Date
Sun Sep 11 2022

Next.jsのapiルートで作ったAPIを、StackBlitz等の他のドメインから使用しようとしたときに、次のようなエラーが出ました。

Access to fetch at 'https://pitang1965-next-portfolio.vercel.app//api/tweet' from origin 'https://vitejs-vite-hxwvfs--5173.local.webcontainer.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

これを修正するには、APIのほうをなんとかしないといけないようです。

次でできました。

インストール

nextjs-corsをインストールします。

$ npm install nextjs-cors

又は

$ yarn add nextjs-cors

又は

$ pnpm install nextjs-cors

apiルートのコード変更

:

import NextCors from 'nextjs-cors';　　　<-- ★追加

export default async function twitter (
  req: NextApiRequest,
  res: NextApiResponse
) {
    await NextCors(req, res, {　　　<-- ★追加
      methods: ['GET'],
      origin: '*',
      optionSuccessStatus: 200,
    });
    :

Post Tags
CORS