CORS Error: No Access-Control-Allow-Origin Header in React App with Sanity

I can help you fix this CORS error! This is a common issue when connecting Sanity to React apps. Let me walk you through the solution step by step.

The "No 'Access-Control-Allow-Origin' header is present" error means your React app's domain isn't authorized to access your Sanity project's data. Here's how to fix it:

Add Your Domain to CORS Origins

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 local development URL exactly as it appears in your browser (including the protocol):

   • http://localhost:3000 (for typical React apps)
   • http://localhost:5173 (for Vite)
   • http://localhost:8000 (for Gatsby)
   • Or whatever port your app runs on

6. Important: Check the "Allow credentials" checkbox if you're using any authentication token in your Sanity client configuration

Critical Details

Protocol matters: http://localhost:3000 and https://localhost:3000 are different origins. Make sure you add the exact URL showing in your browser's address bar.

Port number matters: localhost:3000 is different from localhost:3001. Check which port your React app actually runs on.

Common Configuration Issues

If you're using a token with your Sanity client, your configuration should look like this:

import {createClient} from '@sanity/client'

const client = createClient({
  projectId: 'your-project-id',
  dataset: 'production',
  useCdn: false, // set to false for development
  apiVersion: '2024-01-01',
  token: 'your-token', // only if needed
})

Important: If you have a token in your client config, you must enable "Allow credentials" for that CORS origin in the management dashboard. This is the most common mistake that causes CORS errors even after adding the origin.

Additional Troubleshooting

• Clear your browser cache after adding the CORS origin
• Restart your React dev server after making changes
• Double-check your projectId and dataset in your client configuration
• For production deployment, you'll need to add your production domain (like https://yourdomain.com) as a separate CORS origin

Asset-Specific CORS Issues

Note that CORS settings in the management dashboard apply to the Data API but not automatically to the Asset CDN. If you're specifically having issues fetching assets (images, files), that may require additional configuration.

Since you've been stuck on this for a week with a deadline approaching, I'd recommend starting fresh with these exact steps. The solution is almost always that the origin isn't added correctly or the "Allow credentials" checkbox isn't enabled when using tokens. Make sure you're using client.fetch() correctly with your Authorization header if you have a token, and verify the exact localhost URL and port your React app is running on!