Fix: Shopify Admin API CORS Error
What This Error Means
A Shopify Admin API CORS (Cross-Origin Resource Sharing) error occurs when your application attempts to make requests to the Shopify Admin API from a domain that isn't authorized or properly configured in your app's settings. The error typically appears in your browser's console as "Access to XMLHttpRequest at 'https://your-store.myshopify.com/admin/api/...' from origin 'http://localhost:3000' has been blocked by CORS policy." This is a security mechanism implemented by both browsers and Shopify to prevent unauthorized access to sensitive store data.
When you're building custom applications, integrations, or third-party solutions that interact with Shopify stores, your application needs explicit permission to communicate with Shopify's API endpoints. The CORS error acts as a gatekeeper, ensuring that only trusted applications can access store information. Without proper configuration, your API calls will be rejected before they even reach Shopify's servers, leaving you unable to fetch products, process orders, or manage other critical store data.
In 2026, as Shopify continues to strengthen its security protocols and API infrastructure, understanding and properly configuring CORS has become even more essential for developers. Whether you're working with the REST API or GraphQL endpoints, CORS configuration is a fundamental requirement that must be addressed during the initial setup phase of your application development.
Why You're Seeing This
- Missing or Incorrect Redirect URLs: Your app's redirect URL isn't registered in your Shopify app settings. When your application runs on localhost:3000 during development but you haven't added this URL to your allowed list, Shopify rejects the connection.
- Incorrect Origin Domain: The domain making the API request doesn't match any of the whitelisted domains in your Shopify app configuration. This includes differences between http and https, or www and non-www versions.
- API Scope Permission Issues: While not strictly a CORS error, missing API scopes can sometimes trigger CORS-like blocking. Your app needs the appropriate scopes to access specific endpoints.
- Outdated API Version: You're using a deprecated API version that has different CORS policies. Shopify regularly updates its API versions, and older versions may have stricter or different CORS configurations.
- Third-Party Library Configuration: If you're using a library or SDK, it may not be properly configured with your API credentials or may be making requests from an unexpected origin.
- Development Environment Setup: Your development environment (local machine, Docker container, or cloud development environment) is making requests from an origin that hasn't been registered with Shopify.
- Authentication Token Issues: Your access token is invalid, expired, or doesn't have the necessary scopes to make the requested API calls, which can manifest as a CORS error.
How to Fix It
Step 1: Access Your Shopify App Settings
First, log into your Shopify Partner dashboard and navigate to the app you're developing. In your app's admin settings, locate the "Configuration" or "App Setup" section. This is where you'll manage all the URLs that your app is allowed to communicate from.
Step 2: Add Your Redirect URI
In the configuration section, find the "Redirect URIs" or "Allowed redirect URLs" field. Add the URL where your application is running. During development, this is typically http://localhost:3000 or http://localhost:8000, depending on your port. For production, use your actual domain (e.g., https://myapp.example.com).
Step 3: Configure API Scopes
Ensure your app has the necessary API scopes to access the endpoints you're calling. In your app configuration, check that you have scopes like `read_products`, `write_orders`, or whatever permissions your app requires. Remember to reinstall your app after modifying scopes.
Step 4: Update Your API Request Headers
Make sure your API requests include the proper authentication headers and content type. Here's the correct way to structure your API calls:
// Using fetch API
const accessToken = 'your_shopify_access_token';
const shopName = 'your-store';
const apiVersion = '2024-01';
fetch(`https://${shopName}.myshopify.com/admin/api/${apiVersion}/graphql.json`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Shopify-Access-Token': accessToken,
},
body: JSON.stringify({
query: `
{
products(first: 10) {
edges {
node {
id
title
handle
}
}
}
}
`
})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));Step 5: Verify Your App Installation
Reinstall your app on your test store after making configuration changes. When you reinstall, you'll authorize the app again with the updated scopes and settings. This ensures all changes take effect properly.
Step 6: Test Your Connection
Once your app is installed, test your API connection from your application. Check your browser's console (F12 → Console tab) for any remaining CORS errors. If the error persists, review the specific error message for clues about what domain is being blocked.
The 60-Second Fix
If you're in a hurry, the quickest resolution is to verify three things: (1) Check that your current domain is added to your app's redirect URIs in Shopify, (2) Confirm your access token is valid and hasn't expired, and (3) Reinstall your app to ensure all changes are active. For developers who need to quickly generate and manage Shopify access tokens without the configuration hassle, tools like getshopifytoken.com can automate this step and help you get valid tokens set up immediately, allowing you to focus on fixing the CORS configuration while having verified credentials in place.
Common Mistakes
- Forgetting to Include the Protocol: Adding "localhost:3000" instead of "http://localhost:3000" to your redirect URIs. Shopify requires the full URL including the protocol (http or https).
- Not Reinstalling After Configuration Changes: Many developers modify their app settings but forget to reinstall the app. The new configuration doesn't activate until you reinstall and re-authorize the app.
- Using Different Domains in Development vs. Configuration: Running your app on 127.0.0.1:3000 but registering localhost:3000 in your settings. These are technically different origins and will cause CORS failures.
- Mixing HTTP and HTTPS: Registering http://myapp.com but making requests from https://myapp.com (or vice versa). Modern browsers treat these as different origins, and Shopify enforces strict matching.
Frequently Asked Questions
Q: Can I use a wildcard (*) in my Shopify redirect URIs to allow all domains?
No, Shopify does not support wildcard domains in redirect URIs for security reasons. You must explicitly list each domain that your app will use. This is an intentional security restriction to prevent malicious applications from hijacking authentication flows. For development, use localhost variants, and for production, register your specific domain.
Q: Why do I get a CORS error even though I've added my domain to the redirect URIs?
The redirect URI and the API request origin must match exactly. Redirect URIs are specifically for OAuth authorization flows, but your API requests need matching origin domains. Additionally, check that your access token has the appropriate scopes. If your token lacks the required permissions for an endpoint, the request will be blocked. You can also check your app's logs in the Partner dashboard to see detailed error information about rejected requests.
Q: Do I need to handle CORS differently when using the REST API versus the GraphQL API?
The CORS configuration is the same for both REST and GraphQL APIs—it's handled at the domain level, not the API type level. However, GraphQL is generally recommended for new applications because it's more efficient and requires fewer requests. Ensure your access token has the appropriate scopes for the specific endpoints you're calling, regardless of which API format you use.