Sanity Studio API connection error with new blog preset project

This is a classic CORS (Cross-Origin Resource Sharing) issue that happens when you initialize a new Sanity Studio project. The good news is it's easy to fix!

When you run sanity start, your Studio typically runs on http://localhost:3333 by default. For security reasons, Sanity projects only respond to queries from explicitly allowed origins. A fresh project defaults to allowing localhost:3333, but sometimes the configuration needs to be added manually.

Here's how to fix it:

Option 1: Add CORS origin via CLI (Easiest)

1. Open your terminal in your Studio project folder
2. Run this command:

   sanity cors add http://localhost:3333

3. When prompted, select Yes to allow credentials (this is important for Studio to work)
4. Refresh your browser

Option 2: Add CORS origin via Management Console

If the CLI command doesn't work:

1. Go to manage.sanity.io
2. Select your project
3. Navigate to Settings → API settings
4. Under CORS Origins, click Add CORS origin
5. Enter http://localhost:3333
6. Check the Allow credentials box (this is crucial!)
7. Click Save
8. Refresh your Studio in the browser

If you're using a different port

If you started your Studio on a different port (like localhost:3000), make sure to add that specific URL instead. You can check which port your Studio is running on by looking at the terminal output after running sanity start.

Still not working?

A few other things to check:

• Check Sanity's status: Visit status.sanity.io to make sure all systems are operational
• Clear browser cache: Sometimes cached credentials can cause issues
• Try a different browser: This helps rule out browser-specific issues
• Check your internet connection: Make sure you have a stable connection

The CORS configuration is covered in detail in the Sanity CORS documentation, which explains why this security measure exists and how to manage origins for different environments (development, staging, production).