Getting following error trying to fetch data from react app.

  1. Magento 2.4.2

  2. Reac JS v17

  3. Apollo/Client 3

     import { ApolloClient, InMemoryCache } from "@apollo/client";
     export const client = new ApolloClient({ 
           uri: "https://someurl/graphql",
           cache: new InMemoryCache(),

I also tried to add "no-cors" as suggested but still its not working

fetchOptions: {
    mode: 'no-cors',

enter image description here


First I follow the error and according to this Request should be accepted by backend server , Magento website in my case. We need to provide Cross site origin to use our resourse(graphql). We can use available modules like graycore/magento2-cors or just modify .htaccess ( Apache )

Add Headers to allow content-type

Header add Access-Control-Allow-Origin "http://localhost:3000"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "POST, OPTIONS"
  • POST, OPTION, GET, PUT: You can provide methods as per you requirment

This above solution resoved the CORS error to access graphql from magetno website, But still there is an access control check failed, It does not have HTTP ok status. and I recived below error:

enter image description here

For this I modified Rewrite Condition in .htaccess

RewriteRule ^(.*)$ blank.html [QSA,L]

Hope this post is helpful.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.