Get help on Discord

Error connecting Sanity CMS to a site deployed on Vercel, seeking help with CORS configuration and API endpoint.

9 replies
Last updated: Mar 14, 2024
Hi all, I've recently started working with the sanity cms, and I'm trying to connect it to a site that I've deployed on vercel. I keep getting the following error
GET <http://localhost:3000//api/experience> net::ERR_CONNECTION_REFUSED
. I've checked all my environment variables as well and made sure that my 
.env.local
file has the required keys as follows:
#SANITY_PROJECT_ID=your_project_id
#SANITY_DATASET=your_dataset_name
#SANITY_API_TOKEN=your_sanity_api_token
#SANITY_API_VERSION=2021-03-25 // The API version you want to target
Has anyone encountered this before? If so I'd really appreciate some help with this. I really don't know where I screwed up. Thanks a lot in advance!
AI Update

I can see the issue right away! Your environment variables are all commented out with # symbols at the beginning of each line. In .env files, the # character denotes a comment, which means those lines are being ignored and your variables aren't actually being set.

Remove the # symbols from the beginning of each line in your .env.local file:

SANITY_PROJECT_ID=your_project_id
SANITY_DATASET=your_dataset_name
SANITY_API_TOKEN=your_sanity_api_token
SANITY_API_VERSION=2021-03-25

Also, make sure you replace the placeholder values (your_project_id, your_dataset_name, etc.) with your actual Sanity project credentials. You can find these in your Sanity project dashboard.

A couple of additional things to check:

  1. Restart your development server after updating the .env.local file. Environment variables are only loaded when the server starts, so you need to stop and restart it for changes to take effect.

  2. Vercel deployment: When deploying to Vercel, you need to add these environment variables in your Vercel project settings (Project Settings → Environment Variables), not just in your local .env.local file. The .env.local file only works for local development and typically isn't committed to your repository.

  3. API version: Consider updating your SANITY_API_VERSION to a more recent date like 2024-01-01 or v2024-12-16 to get the latest API features and improvements.

The ERR_CONNECTION_REFUSED error you're seeing is likely because your API route is trying to connect to Sanity but doesn't have the required credentials (since they were commented out), causing the connection to fail.

👋 Have you added that port to your CORS origins in sanity.io/manage ?
I added the whole url for the site that vercel generated. Can you share an example of what the correct CORS value is supposed to look like please? 😅 
<http://localhost:3000>
Oh, also I just noticed the double 
//
before 
api
. Is that intended?
So I added localhost:3000 into the cors origin.
Also the // isnt intended. So I used postman to check the vercel url ‘testurl/api/experience’ and it returns data. But for some reason when I check the console of the deployed site, it gives me that error
Would it help if I set a base url value in the env.local file?
user M
there was a typo in some of the url strings that used the baseurl environment variable. Its all good, and the site is deployed too!
Cheers!
Glad you got it sorted out!

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?