CORS 500 errors when requesting "/graphql/execute.json" on dispatcher. | Community
Skip to main content
sreedobe
sreedobe
Level 4
May 27, 2025
Solved

CORS 500 errors when requesting "/graphql/execute.json" on dispatcher.

  • May 27, 2025
  • 3 replies
  • 866 views

Hi,

 

I have a front end JavaScript application, which needs to get data from a persistent query exposed at "https:wwwstage.companyx.com/graphql/execute.json/quizzes/quizone"

 

Tried to make a fetch GET call to above url in front end javascript code, resulting in 500 CORS error.

I enabled , CORS chrome plugin, but that did not help and still got 500 CORS issue.

 

Note: I am able to see content fragments json , when I hit the url directly in a browser.

 

I added below in vite.config.ts file, which resulted in http://localhost:4400/graphql/execute.json/quizzes/quizone , 404 error.

 

export default defineConfig({ server: { proxy: { // Using the proxy instance '/graphql': { target: 'https://wwwstage.companyx.com', changeOrigin: true, }, }, }, })

 

Any ideas, why I am not able to hit GraphQL end point to do headless delivery of content and any ideas on work around.

 

Thanks,

Sree

Best answer by SureshDhulipudi

The issue you're encountering is related to CORS (Cross-Origin Resource Sharing) restrictions. When making a request from your frontend JavaScript application to a different domain (in this case, https://wwwstage.companyx.com), the browser enforces CORS policies to ensure security.

CORS Error:

The server at https://wwwstage.companyx.com is not configured to allow requests from your frontend's origin (e.g., http://localhost:4400).
Even though you can access the URL directly in the browser, the browser enforces CORS policies for JavaScript requests.

 

Please try the above two solutions suggested by @santoshsai & @amitvishwakarma 

3 replies

SantoshSai
Community Advisor
SantoshSaiCommunity Advisor
Community Advisor
May 28, 2025

Hi @sreedobe,

Even though you're able to open the URL in the browser, JavaScript fetch calls from a different origin (localhost) are subject to browser CORS policy.

Chrome CORS plugin only bypasses for testing UI, not fetch requests inside code.

Assuming you are requesting from localhost: Your AEM server (wwwstage.companyx.com) must allow CORS requests from http://localhost:4400.

CORS is controlled via dispatcher/src/conf.d/available_vhosts/cors.any:

Example:

<LocationMatch "/graphql/.*">
    Header always set Access-Control-Allow-Origin "http://localhost:4400"
    Header always set Access-Control-Allow-Methods "GET, OPTIONS"
    Header always set Access-Control-Allow-Headers "Content-Type, Authorization"
    Header always set Access-Control-Allow-Credentials "true"
</LocationMatch>

Make sure:

  • OPTIONS preflight is handled properly

  • Allowed origins include localhost:4400

Then redeploy dispatcher code changes.

In dev or stage, allow wildcard (*) temporarily to unblock local testing, but don’t use this in production.

Could you check if your Vite proxy rule should map the entire path correctly?

export default defineConfig({
  server: {
    proxy: {
      '/graphql/execute.json': {
        target: 'https://wwwstage.companyx.com',
        changeOrigin: true,
        secure: false,
      },
    },
  },
});

Then fetch using:

fetch('/graphql/execute.json/quizzes/quizone')

Not the full external URL - Vite will proxy that for you.

This avoids CORS entirely in dev, because the browser thinks it’s calling localhost.

 

Alternatively, If you can’t change AEM CORS config and you need a workaround, you can:

  • Write a simple Node/Express proxy server

  • Forward GraphQL requests from localhost to AEM

  • Avoids CORS since request is server-to-server

// vite.config.ts
'/api/graphql': {
  target: 'https://wwwstage.companyx.com',
  changeOrigin: true,
  rewrite: (path) => path.replace(/^\/api\/graphql/, '/graphql'),
}

 Hope this helps!

Santosh Sai
    AmitVishwakarma
    Community Advisor
    AmitVishwakarmaCommunity Advisor
    Community Advisor
    May 28, 2025

    Hi @sreedobe ,

    Try below steps:

    Step 1: Add CORS Headers in Dispatcher

    Edit the dispatcher config file:
    dispatcher/src/conf.d/available_vhosts/cors.any

    Add this block:

    <LocationMatch "^/graphql/execute.json.*"> Header always set Access-Control-Allow-Origin "http://localhost:4400" Header always set Access-Control-Allow-Methods "GET, OPTIONS" Header always set Access-Control-Allow-Headers "Content-Type, Authorization" Header always set Access-Control-Allow-Credentials "true" </LocationMatch> <LocationMatch "^/graphql$"> Header always set Access-Control-Allow-Origin "http://localhost:4400" Header always set Access-Control-Allow-Methods "GET, OPTIONS" Header always set Access-Control-Allow-Headers "Content-Type, Authorization" Header always set Access-Control-Allow-Credentials "true" </LocationMatch>

    Step 2: Allow Preflight (OPTIONS) Requests

    Ensure you don’t block OPTIONS in your /filter rules and that OPTIONS requests are forwarded to AEM. In dispatcher/src/conf.dispatcher.d/filters/filters.any:

    /0001 { /type "allow" /method "OPTIONS" /url "/graphql*" }
    SureshDhulipudi
    Community Advisor
    SureshDhulipudiCommunity AdvisorAccepted solution
    Community Advisor
    May 28, 2025

    The issue you're encountering is related to CORS (Cross-Origin Resource Sharing) restrictions. When making a request from your frontend JavaScript application to a different domain (in this case, https://wwwstage.companyx.com), the browser enforces CORS policies to ensure security.

    CORS Error:

    The server at https://wwwstage.companyx.com is not configured to allow requests from your frontend's origin (e.g., http://localhost:4400).
    Even though you can access the URL directly in the browser, the browser enforces CORS policies for JavaScript requests.

     

    Please try the above two solutions suggested by @santoshsai & @amitvishwakarma 

      Terms & ConditionsAccessibility statement

      Loading footer...