How to access the magento 2 graphql api using react js

Question

We are developing a headless eCommerce application for our company, so here is my question how to access the magento2 product collection graphql API which is running on a server using react js which is running on localhost:3000, I don't understand why it is blocking the request and please explain this one or refer any reference to get understand this and I am attaching the console error which I got while connecting

index.js

const link = createHttpLink({
  uri: 'http://192.168.1.16/graphql',
  headers: {
    "Access-Control-Allow-Origin": "http://192.168.1.69:3000",
    "Access-Control-Allow-Methods": "GET, POST, PUT",
    "Access-Control-Allow-Headers": "Content-Type"
  },
  mode: 'no-cors',
});


const client = new ApolloClient({
  link,
  cache: new InMemoryCache(),
});

Answer 1

We also faced the same issue for my Headless project.

Try below two possible solutions.

Solution 1 :

Add the below line at the top of the index.php file. You can find the index.php file in the root path Or inside of pub folder in Magento.

header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
header("Access-Control-Allow-Headers: Content-Type, Access-Control-Allow-Headers, X-Requested-With");

The index file screenshot with the above code is as below.

Solution 2 :

Install & Configure below CORS Magento 2 module. This module allows you to enable Cross-Origin Resource Sharing (CORS) REST API requests in Magento 2 by adding the appropriate HTTP headers and handling the pre-flight OPTIONS requests.

Magento 2 CORS Module