Adobe Commerce GraphQL CORS error

[rahilthere9532]

Hi Team,
I'm facing CORS error on GraphQL query.

We have ReactJs and React Native, so query will be triggered via browser XHR request.
If we trigger in server such as node js, its working fine.

(Reason: CORS header ‘Access-Control-Allow-Origin’ missing)

We are using adobe commerce(Magento cloud)
finding difficulty in using GraphQL.
Enterprise Edition version: 2.4.7.
Please help us fix this.

Thank You
Mohammed Rahil Ovaiz

[kirankumar272d]

In which server your facing this issues ? integration or staging?

[johnwebdes40a5]

Hello @rahilthere9532 

The error you're seeing—CORS header ‘Access-Control-Allow-Origin’ missing—indicates that the server hosting the GraphQL endpoint is not allowing cross-origin requests from your frontend

Add CORS Headers to Magento Server (Apache/Nginx)

If you're hosting Magento behind Apache or Nginx, you may need to modify the server's configuration to include the correct CORS headers.

​Hope it helps ! 

If you find our reply helpful, please give us kudos.

A Leading Magento Development Agency That Delivers Powerful Results, Innovation, and Secure Digital Transformation.

WebDesk Solution Support Team

Get a Free Quote | | Adobe Commerce Partner | Hire Us | Call Us 877.536.3789

[Milople]

Hello @rahilthere9532,

This happens generally when you try access another domain's resources, and that other domain hasn't your domain on his cors origin whitelist.

To access ressources in a domain, it have to be previously authorized by the "cors origin" policy of that domain.

This is a security feature to avoid for example other domains to use ressources on your server or that can help to prevent  

You can fix this problem if you have control of both domains servers:

Solution 1: via .htaccess

You can write this in the .htaccess of the requested domain file:

=> Not recommended allow all domains

 <IfModule mod_headers.c>    Header set Access-Control-Allow-Origin "*"    </IfModule>

=> Recommended allow only expected domains

<IfModule mod_headers.c>    Header set Access-Control-Allow-Origin 'https://my-domain.example'    </IfModule>

Solution 2: set headers the correct way

If you set this into the response header of the requested file, you will allow everyone to access the resources:

=> Not recommended allow all domains

Access-Control-Allow-Origin : *

OR

=> Recommended allow only expected domains

Access-Control-Allow-Origin : http://www.your-domain.example  

If the issue is resolved, click Kudos and accept it as a solution.