demo

https://api-routes-cors-app.vercel.app

curl --location --request POST 'https://api-routes-cors-app.vercel.app/api/graphql' \
--header 'Content-Type: application/json' \
--data-raw '{"query":"query GetUser($name: String!) {\n  getUser(name: $name) {\n    avatar_url\n  }\n}","variables":{"name":"mingderwang"}}'

or

curl --location --request POST 'http://localhost:3000/api/graphql' \
--header 'Content-Type: application/json' \
--data-raw '{"query":"query GetUser($name: String!) {\n  getUser(name: $name) {\n    avatar_url\n  }\n}","variables":{"name":"mingderwang"}}'

result

{"data":{"getUser":{"avatar_url":"https://avatars.githubusercontent.com/u/47238?v=4"}}}

API Routes Example with CORS

Next.js ships with API routes which provides an easy solution to build your own API.

This example shows how to create an API endpoint with CORS headers, using the cors package.

Deploy your own

Deploy the example using Vercel or preview live with StackBlitz

How to use

Execute create-next-app with npm or Yarn to bootstrap the example:

npx create-next-app --example api-routes-cors api-routes-cors-app
# or
yarn create next-app --example api-routes-cors api-routes-cors-app
# or
pnpm create next-app -- --example api-routes-cors api-routes-cors-app

Deploy it to the cloud with Vercel (Documentation).