CORS error when connecting to MongoDB Atlas using Graphql

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,

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

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

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

1 Like