Configure CORS on gqlgen with React

The first time i encountered the CORS preflight request error, i spent 3-4 days trying to fix the error and it pushed me into impostor syndrome. This is the sole reason for this article to help the next dev this hassle

What is CORS?

CORS stands for Cross Origin Resource Sharing. CORS is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) from its own.

Explaining CORS to a 5 years old...

It simply means a child can only play with toys (resources) in his own house (domain). If he wishes to play with the toys of his neighbor in the next house (domain), his neighbor has to permit him.

Configuring CORS..

CORS can either be configured on the server side (backend) or on the client side (frontend). It is ideal that CORS be set on the server side since the server is the API and the client is going to be making request to its end point to fetch its resources.

there is a go package called chi that helps us to get configuration code. To install that package open our terminal and run

go get github.com/go-chi/chi

we would also need the rs/cors package. still inside your terminal we run

go get github.com/rs/cors

now we are going to add our lines of code. In our server.go file add this

// Add CORS middleware around every request
    // See https://github.com/rs/cors for full option listing
    router.Use(cors.New(cors.Options{
        AllowedOrigins:   []string{"http://localhost:3000"},
        AllowCredentials: true,
        Debug:            true,
    }).Handler)

the Allowed origins should contain the domain of the front end, like in my case my app was bootstrapped with create-react-app so its default port is 3000. If you would be using multiple ports, then all the ports/domain should be added inside the allowed origins or use a wild card "*" though its not a good idea for use on production.

Thats all for our backend.....

now in our front end, to fetch data from a graphql API with react the most popular tech is Apollo. we are going to disable CORS because Apollo has a default value set for CORS and if it is not handled,the default values will be used.

Inside our index.js file we will wrap our app in the apollo provider tag.

   <ApolloProvider client={client}>
      <App />
    </ApolloProvider>

don't forget to install the package react-appollo. you can see it's implementation here github link

if you have any feedback, you can contact me on @CodedFingers or drop your comment below...cheeers!!