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

[sreedobe]

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

[SantoshSai]

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!

[AmitVishwakarma]

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*" }

Vite Proxy for Dev Environment
In your vite.config.ts, add this:

import { defineConfig } from 'vite';

export default defineConfig({
  server: {
    proxy: {
      '/graphql': {
        target: 'https://wwwstage.companyx.com',
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/graphql/, '/graphql'),
      },
    },
  },
});
​

Then in your Frontend JavaScript

fetch('/graphql/execute.json/quizzes/quizone')
  .then(response => response.json())
  .then(data => console.log('GraphQL Response:', data))
  .catch(err => console.error('Error:', err));

Now fetch request is sent to localhost:4400/graphql/..., Vite proxies it to https://wwwstage.companyx.com/graphql/..., and CORS is bypassed because it's a same-origin request from the browser’s perspective.

Node Proxy

If dispatcher changes are not allowed, use a local Node proxy:

// node-proxy.js
const express = require('express');
const request = require('request');
const app = express();

app.use('/api/graphql', (req, res) => {
  const url = `https://wwwstage.companyx.com/graphql${req.url}`;
  req.pipe(request({ url, headers: req.headers })).pipe(res);
});

app.listen(3001, () => console.log('Proxy running on port 3001'));

Then fetch:

fetch('http://localhost:3001/api/graphql/execute.json/quizzes/quizone')

Regards,
Amit

[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