CORS Origins errors persist after removing/re-adding tokens and origins

I can see you're dealing with a frustrating CORS issue that started after adding/removing tokens. This is a common problem, and the good news is it's usually fixable. Let me break down what's likely happening and how to resolve it.

Understanding the Issue

Based on the CORS documentation, CORS origins in Sanity control which domains can make authenticated requests to your project from browsers. When you mention adding tokens and then seeing CORS errors even after reverting, this suggests the "Allow credentials" setting might be the culprit.

Why http://localhost:* Works But Hosted Doesn't

The wildcard port pattern http://localhost:* is valid and will match any port on localhost, which explains why your local development works. However, wildcards with credentials enabled can be problematic for security reasons, and your hosted domains need exact origin matches.

Steps to Fix This

1. Clear Out Existing CORS Origins

You can manage CORS origins via the Management Console or CLI:

Via Management Console:

• Go to https://www.sanity.io/manage
• Select your project → Settings → API settings
• Under "CORS Origins", delete all existing origins
• Start fresh by adding them back one at a time

Via CLI:

sanity cors list  # See what's currently configured
sanity cors delete [ORIGIN]  # Remove problematic ones

2. Add Your Origins Correctly

For each origin, you need to specify:

• Exact protocol and domain (e.g., https://yourdomain.com, not yourdomain.com)
• Enable "Allow credentials" if you're using tokens or authenticated requests

Common mistakes:

• Mixing up http:// vs https://
• Forgetting to enable "Allow credentials" when using tokens
• Not including the exact port for non-standard ports

3. For Your Hosted Site

Add your hosted domain explicitly:

sanity cors add https://your-actual-domain.com
# When prompted, select YES to allow credentials

Or via the Management Console, making sure to check the "Allow credentials" box.

4. Verify Your Dataset is Public (if appropriate)

Go to your project settings and ensure your dataset visibility is set correctly. However, note that even public datasets require CORS configuration for browser-based requests with credentials.

The Token Connection

When you added a token to your config, you likely started making authenticated requests. This requires:

1. The exact origin to be in your CORS list
2. "Allow credentials" must be enabled for that origin

The browser security documentation explains that browsers will block requests if the Access-Control-Allow-Credentials header isn't properly set, which is controlled by that checkbox.

Quick Troubleshooting Checklist

• Remove all CORS origins and re-add them
• Ensure "Allow credentials" is checked for each origin
• Use exact URLs including protocol (https:// not just domain)
• For localhost development, use http://localhost:3000 (specific port) or http://localhost:* (all ports)
• For hosted sites, use the exact production URL
• Clear your browser cache after making CORS changes
• Check that you're not mixing HTTP and HTTPS

Why Removing Tokens Didn't Fix It

Once you start making authenticated requests (which tokens enable), the CORS requirements change. Even after removing tokens from your code, if your client is still configured to send credentials, you'll need the CORS origins properly configured with credentials allowed.

CLI Commands to Reset CORS

If you want to completely reset your CORS configuration via CLI:

# List current origins
sanity cors list

# Delete each one
sanity cors delete http://localhost:3000
sanity cors delete http://localhost:3333
# ... etc

# Add them back with proper credentials
sanity cors add http://localhost:3000
# Select YES when prompted for credentials

sanity cors add https://your-production-domain.com
# Select YES when prompted for credentials

The key insight here is that wildcards like http://localhost:* are allowed, but for production domains you need exact matches. And critically, if you're using tokens or any form of authentication, you must enable "Allow credentials" for each origin.

If you're still stuck after trying these steps, double-check that your production URL exactly matches what's in the CORS settings (including trailing slashes, subdomains, etc.) - CORS matching is very strict!