Skip to content
Adobe Commerce Storefront

Search is only available in production builds. Try building and previewing the site to test it out locally.

CORS Setup

Quick test: Is CORS working?

If you already have CORS configured, test it by replacing YOUR_STOREFRONT_URL with your actual frontend URL:

curl -I -X OPTIONS https://your-commerce-backend.com/graphql \
  -H "Origin: YOUR_STOREFRONT_URL" \
  -H "Access-Control-Request-Method: POST"

Look for these headers in the response:

  • Access-Control-Allow-Origin: YOUR_STOREFRONT_URL (or * if using a wildcard)
  • Access-Control-Allow-Methods: GET, POST, OPTIONS

If you see these headers with your storefront URL, CORS is configured correctly. If not, follow the setup steps below.

When do you need CORS?

You need CORS when your storefront runs on a different domain or port than your Adobe Commerce backend (for example, http://localhost:3000 → https://commerce.example.com).

Without CORS, browsers block cross-origin requests and you’ll see errors like:

Access to fetch at 'https://commerce.example.com/graphql' from origin 'http://localhost:3000'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present

Quick steps

Add CORS support

To add CORS headers to your Adobe Commerce GraphQL endpoints, you can configure your server, implement a custom module, or use a third-party CORS module (such as graycore/magento2-cors).

If using a CORS module, install it via Composer:

composer require <module-package-name>

Refer to your chosen module’s documentation for specific installation and configuration steps.

Enable the module

If using a CORS module, enable it and run setup commands:

php bin/magento module:enable <Module_Name>
php bin/magento setup:upgrade
php bin/magento cache:flush

Configure CORS in the Magento Admin

The module adds a CORS Whitelist configuration section in the admin panel.

Navigate to Stores → Configuration → General → Web → CORS Whitelist and configure the following fields:

Allowed Origins

Add your storefront URLs (one per line, no trailing slashes):

https://main--aem-boilerplate-commerce--hlxsites.aem.live
https://www.example.com

Or use * for multiple dynamic URLs (such as branch previews and localhost):

How origins are matched:

  • Must match exactly: protocol (http vs https), hostname, and port
  • http://localhost:3000 ≠ https://localhost:3000 (different protocol)
  • http://localhost:3000 ≠ http://localhost:5173 (different port)
  • http://localhost:3000 ≠ http://127.0.0.1:3000 (different hostname)
  • No trailing slashes: http://localhost:3000 not http://localhost:3000/

Allowed Methods

Set to: GET,POST,OPTIONS

Allowed Headers

Set to: Content-Type,Authorization,X-Requested-With

Add Store if using multistore.

Allow Credentials

Enable this if your storefront sends cookies or authentication credentials.

Test your CORS configuration

Open your storefront in a browser and check the Network tab in DevTools:

  • Look for preflight OPTIONS requests to your GraphQL endpoint
  • Verify the response includes headers like:
    • Access-Control-Allow-Origin: <your-storefront-url> (or * if using a wildcard)
    • Access-Control-Allow-Methods: GET, POST, OPTIONS
    • Access-Control-Allow-Headers: Content-Type, Authorization

If configured correctly, your GraphQL requests should succeed without CORS errors.

Common pitfalls

Next steps

If you encounter issues or need detailed configuration guidance, see CORS Troubleshooting

References