VercelへNext.js(v13.4.19、App Router)のアプリケーションをデプロイしました。
動作確認をしていくと、Route Handlers周りでCORSエラーが出たので解決していきたいます
エラー文
1 2 3 |
Access to fetch at 'https://sample-prisma-next-*******-*******.vercel.app/api/user' from origin 'https://sample-prisma-next-app.vercel.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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. |
CORSポリシーによってブロックされましたー と書いてあるので、CORSエラーですね
CORSとは
Cross Origin Resource Sharing (オリジン間リソース共有) のこと。
WEBアプリケーションが異なるオリジンからリソースを引っ張ってくること。
詳しくは↓をご覧ください
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JUUzJTgxJUFBJUUzJTgyJTkzJUUzJTgxJUE4JUUzJTgxJUFBJUUzJTgxJThGJTIwQ09SUyUyMCVFMyU4MSU4QyVFMyU4MiU4RiVFMyU4MSU4QiVFMyU4MiU4Qi4uLiVFMyU4MSVBRiVFMyU4MiU4MiVFMyU4MSU4NiVFNyVCNSU4MiVFMyU4MiU4RiVFMyU4MiU4QSVFMyU4MSVBQiVFMyU4MSU5OSVFMyU4MiU4QiVFMyU4MCU4MiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NzM2MzMyZDAxMTRlZjUyMmU1ZDA4ZDczNDY1ZTU1ZTQ&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwYXR0NTUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWIzODM1YTYyODgzMjA0N2U4YjJkNmM4Y2NjZTNkYmVh&blend-x=142&blend-y=491&blend-mode=normal&s=72b76f439633a104675b9c4d09f44f5b)
なんとなく CORS がわかる...はもう終わりにする。 - Qiita
概要Access to XMLHttpRequest at ' from origin ' has been…
どう解決するか??
エラー文にあるとおり、APIのレスポンスヘッダにAccess-Control-Allow-Origin を付与します
また、許可するHTTPメソッドとリクエストヘッダを設定するため、
-
Access-Control-Allow-Methods :GET、POST、OPTIONSを許可
-
Access-Control-Allow-Headers :Content-Typeを許可
も付与します
※許可するメソッドやリクエストヘッダは各自必要なものを設定してください
コード修正
next.config.jsでAPIのレスポンスヘッダを設定します
公式ドキュメント
next.config.js Options: headers | Next.js
Add custom HTTP headers to your Next.js app.
こんな感じに設定すればOK
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
/** @type {import('next').NextConfig} */ const nextConfig = { // 全ての API routes にマッチ async headers() { return [ { // 対象APIのパスパターン // 今回は src/app/api/ 配下にAPIを作っているので下記のようにする source: "/api/:path*", headers: [ { // CORSを許可するオリジン key: "Access-Control-Allow-Origin", // すべてのオリジンを許可するなら * (アスタリスク) // ただセキュリティ的にはよろしくないので注意 value: "https://sample-prisma-next-app.vercel.app", }, { // 許可するメソッド key: "Access-Control-Allow-Methods", value: "GET,OPTIONS,POST", }, { // 許可するリクエストヘッダ key: "Access-Control-Allow-Headers", value: "Content-Type", }, ], }, ]; }, }; module.exports = nextConfig; |
これで無事CORSエラーが出なくなりました、ひと安心です
余談
next.config.jsで設定しなくても、
各APIのレスポンス時にヘッダを付与することでも解決します
![](https://hisuiblog.com/wp-content/uploads/cocoon-resources/blog-card-cache/ce9207a3d609f1a3b82958f4bf3f05c3.png)
Next.js appルートでのAPI RoutesのCORS設定
参考記事
next.config.js Options: headers | Next.js
Add custom HTTP headers to your Next.js app.
Next.js と TypeScript で、CORS 問題を解決する - コムテブログ
Next.js と TypeScript での CORS (Cross-Origin Resource Sharing) 問題を解決するための方法を紹介します。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fcdn.qiita.com%2Fassets%2Fpublic%2Farticle-ogp-background-9f5428127621718a910c8b63951390ad.png?ixlib=rb-4.0.0&w=1200&mark64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTkxNiZ0eHQ9JUUzJTgxJUFBJUUzJTgyJTkzJUUzJTgxJUE4JUUzJTgxJUFBJUUzJTgxJThGJTIwQ09SUyUyMCVFMyU4MSU4QyVFMyU4MiU4RiVFMyU4MSU4QiVFMyU4MiU4Qi4uLiVFMyU4MSVBRiVFMyU4MiU4MiVFMyU4MSU4NiVFNyVCNSU4MiVFMyU4MiU4RiVFMyU4MiU4QSVFMyU4MSVBQiVFMyU4MSU5OSVFMyU4MiU4QiVFMyU4MCU4MiZ0eHQtY29sb3I9JTIzMjEyMTIxJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTU2JnR4dC1jbGlwPWVsbGlwc2lzJnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9NzM2MzMyZDAxMTRlZjUyMmU1ZDA4ZDczNDY1ZTU1ZTQ&mark-x=142&mark-y=112&blend64=aHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTYxNiZ0eHQ9JTQwYXR0NTUmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT0zNiZ0eHQtYWxpZ249bGVmdCUyQ3RvcCZzPWIzODM1YTYyODgzMjA0N2U4YjJkNmM4Y2NjZTNkYmVh&blend-x=142&blend-y=491&blend-mode=normal&s=72b76f439633a104675b9c4d09f44f5b)
なんとなく CORS がわかる...はもう終わりにする。 - Qiita
概要Access to XMLHttpRequest at ' from origin ' has been…
![](https://hisuiblog.com/wp-content/uploads/cocoon-resources/blog-card-cache/ce9207a3d609f1a3b82958f4bf3f05c3.png)
Next.js appルートでのAPI RoutesのCORS設定
コメント