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

Question

I have searched all over StackOverflow and saw similar questions but have not found a working solution. Wondering if anyone has a working solution? I am developing a create react app on localhost:3000 and trying to access through my Apollo Client a URI on a different site (I am testing with https://developer.github.com/v4/explorer/).

I have added the fetchOptions mode of 'no-cors' to my new ApolloClient instance but I am still getting a CORS error in my console. My enitre index.js file is below:

import React from 'react';
import ReactDOM from 'react-dom';

import { ApolloProvider } from 'react-apollo';
import { ApolloClient, HttpLink, InMemoryCache } from 'apollo-boost';

import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';


const client = new ApolloClient({
    link: new HttpLink({ uri: 'https://developer.github.com/v4/explorer/' }),
    fetchOptions: {
        mode: 'no-cors',
      },
    cache: new InMemoryCache()
  });
  
  const AppWithProvider = () => (
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>
  );
ReactDOM.render(<AppWithProvider />, document.getElementById('root'));


serviceWorker.unregister();

Error message in console: Access to fetch at 'https://developer.github.com/v4/explorer/' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 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.

Answer 1

In order for CORS to work, the server needs to be configured to support your host (in this case localhost). However, CORS is not needed for server-to-server communication, so what you typically do is set up a proxy.

Create-react-app has built-in support for setting up such a proxy: https://create-react-app.dev/docs/proxying-api-requests-in-development/.