CORS error when connecting to MongoDB Atlas using Graphql

[cyril_moreau]

Hello,

I get a CORS error when trying to connect to the atlas graphql endpoint
According to @Sumedha_Mehta1 , I would not get the CORS error if i was using the graphql : Mongo Data API and CORS - #4 by Stennie
The error :
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://eu-central-1.aws.realm.mongodb.com/api/client/v2.0/app/application-0-emfej/graphql. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 204.

What are the other possibilities?
has someone got the same issue?

My code :

import React, { useState, useEffect } from "react";
import "./App.css";
import { withAuthenticator } from "@aws-amplify/ui-react";
import Amplify from "aws-amplify";
import awsExports from "./aws-exports";
import '@aws-amplify/ui-react/styles.css';
import { ApolloClient, ApolloProvider, createHttpLink, InMemoryCache, gql } from '@apollo/client';
import { setContext } from '@apollo/client/link/context';
import CreateOrganisation from "./CreateOrganisation"

Amplify.configure(awsExports);


function App({ signOut, user }) {
 

const httpLink = createHttpLink({
  uri: 'https://eu-central-1.aws.realm.mongodb.com/api/client/v2.0/app/application-0-emfej/graphql',
});

const authLink = setContext((_, { headers }) => {
  const token = user.signInUserSession.idToken.jwtToken;
  return {
    headers: {
      'Access-Control-Allow-Origin': '*',
      jwtTokenString: token ? `${token}` : "",
    }
  }
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});


 return (
     <ApolloProvider client={client}>
      <CreateOrganisation />
     </ApolloProvider>
 )
}
export default withAuthenticator(App);

Best regards,

[psram (Ramkumar Pillai)]

Rather than calling from React Client, you should try calling from Server side NodeJS
or else add Proxy to your web container
for Nginx you can try like this devops-demo/default.conf at master · psramkumar/devops-demo · GitHub

[cyril_moreau]

Thank you @psram

I was looking for a built-in solution
I have found in the “app settings” tab → Allowed Request Origins

I was wondering if this could be the built-in solution but i dont succeed to make it work.

Any solution provided in Mongo atlas settings?

Best regards,
Cyril

[cyril_moreau]

I have followed @psram suggestion and used his nginx docker container.
Just for other people that may want to do the same thing i let my default.conf file here :
parameters to change :

• proxy_set_header Origin
• proxy_pass

server {
    listen       80;

    location /graphql {  
        proxy_ssl_session_reuse off;
        proxy_ssl_server_name on;
        proxy_http_version 1.1;
        proxy_set_header Origin http://localhost:3001; # the url of my react app
        proxy_hide_header Access-Control-Allow-Origin;
        add_header Access-Control-Allow-Origin $http_origin;
        add_header Access-Control-Allow-Headers *;
        proxy_pass https://eu-central-1.aws.realm.mongodb.com/api/client/v2.0/app/application-0-xxx/graphql; 
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

As i am working in my laptop using docker. I launch 2 docker containers :

1. Nginx proxy to access your graphql backend on http://localhost/graphql (instead of https://eu-central-1.aws.realm.mongodb.com/api/client/v2.0/app/application-0-xxx/graphql)
2. React app on http://localhost:3001

In your react app code you would access the graphql endpoint this way :

const httpLink = createHttpLink({
  uri: 'http://localhost/graphql',
});

const authLink = setContext((_, { headers }) => {
  const token = user.signInUserSession.idToken.jwtToken;
  console.log("token",token)
  return {
    headers: {
      ...headers,
      jwtTokenString: token ? `${token}` : "",
    }
  }
});

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
});

And you would access your react app through the browser at http://localhost:3001

I hope this will help
Best regards