Get help on Discord

Uncaught Error: Network Error While Attempting to Reach https://00000000.apicdn.sanity.io/v1/data/query/production

3 replies
Last updated: Aug 7, 2020
Hi,
I'm having trouble with the sanity javascript sdk in nextjs. Other calls work (see the movies json) but the sanity calls only work if I make them in getServerSideProps.

Seems like the sdk doesnt play so well with nextjs. Is that expected?

Any help appreciated. Thanks

I'm getting
Uncaught Error: Network error while attempting to reach
https://00000000.apicdn.sanity.io/v1/data/query/production?query=*%5B_type%20%3D%3D%20%22candidate%22%20%26%26%20_id%20%3D%3D%20%24cid%5D%20%7B%0A%20%20%20%20%20%20transcript%2C%0A%20%20%20%20%7D%5B0...1%5D%0A%20%20%20%20&%24cid=%22cbadb288-9700-47c5-a99f-78f7b990f77e%22 


async componentDidMount() {
    const transcriptQuery = `*[_type == "candidate" && _id == $cid] {
      transcript,
    }[0...1]
    `;
    const data = await fetch('<https://jsonplaceholder.typicode.com/posts').then(response> => response.json());
    console.log(data);
    // const transcript = await sanity.fetch(transcriptQuery, { cid: 'cbadb288-9700-47c5-a99f-78f7b990f77e' });
    // console.log(transcript);
}

AI Update

The error you're seeing is a CORS (Cross-Origin Resource Sharing) issue, not a problem with the Sanity JavaScript SDK itself. The SDK works great with Next.js, but when you make Sanity API calls from the browser (like in componentDidMount), you need to configure CORS origins.

Why it works in getServerSideProps but not componentDidMount

  • getServerSideProps runs on the server, so it bypasses browser CORS restrictions entirely
  • componentDidMount runs in the browser, which enforces CORS policies and blocks requests to domains that aren't whitelisted

The Solution: Add CORS Origins

You need to whitelist your Next.js application's domain in your Sanity project settings:

  1. Go to manage.sanity.io
  2. Select your project
  3. Navigate to Settings → API → CORS Origins
  4. Click Add CORS origin
  5. Add your domain with the full URL:
    • For local development: http://localhost:3000 (or whatever port you're using)
    • For production: https://yourdomain.com
  6. Important: Check the "Allow credentials" box if you're using authentication tokens
  7. Save the changes

You can add multiple origins (one for localhost, one for staging, one for production, etc.).

Alternative: Use API routes instead

If you prefer a server-side approach without using getServerSideProps, you can create a Next.js API route that handles the Sanity query server-side, then fetch from that endpoint in your component. This way you don't need to configure CORS at all since the Sanity client runs on your server.

The CORS configuration documentation is available at the Sanity CORS docs, and you can also manage CORS origins via the Sanity CLI with sanity cors add if you prefer the command line approach.

Actually its not just through the sdk, its any call that does not originate from the getServerSideProps initial method
Could it be a CORs issue? https://www.sanity.io/docs/cors
seems that was it 🤦.Thanks.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?