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;
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)