Access to fetch at 'http://localhost:6969/graphql' from origin 'http://localhost:3000' has been blocked by CORS policy:

Question

This is reamining part of error -> No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I am learning Graphql with React js with help of Apollo Client , This is my Server.js Code :-

const express = require("express");
const app = express();
const PORT = 6969;
const userData = require("./MOCK_DATA.json");
const schema = require("./Schemas/index.js")
const graphql = require("graphql");

const {
    GraphQLObjectType,
    GraphQLSchema,
    GraphQLInt,
    GraphQLString,
    GraphQLList
} = graphql
const {graphqlHTTP} = require('express-graphql')

 
app.use('/graphql', graphqlHTTP({
    schema,
    graphiql: true
}))


app.listen(PORT, () => {
    console.log("Server Running");
})

This is my App.js File To show Fetched Data :-

import React from 'react';
import './App.css';
import { ApolloClient, InMemoryCache, ApolloProvider, HttpLink, from } from '@apollo/client'
import {onError} from '@apollo/client/link/error';
import GetUser from './Components/GetUser';


const errorLink = onError(({ graphqlErrors, networkError }) => {
  if (graphqlErrors) {
    graphqlErrors.map(({ message, location, path }) => {
      alert(`Graphql error ${message}`);
    });
  }
});

const link = from([
  errorLink,
  new HttpLink({ uri: "http://localhost:6969/graphql" }),
]);

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

function App() {
  return (
    <ApolloProvider client={client }>
      <GetUser/>
    </ApolloProvider>
  );
}

export default App;

Answer 1

As I know, you should give access to the http://localhost:3000 on your backend file. However, here is the more accurate answer for your question.

Also check the followings out :

CORS issue with using localhost:3000 to access graphql API at a different URL

CORS error: Access to fetch backend to frontend, Graphql (Nodejs, Reactjs)