Vue/Apollo/Realm: CORS issue

MongoDB Atlas App Services & Realm
1

I’m trying to configure and use the GraphQL endpoint in my Vue.js web-app, but I’m met with CORS errors:

The Same Origin Policy disallows reading the remote resource at https://us-east-1.aws.realm.mongodb.com/api/client/v2.0/app/<MY_APP_ID>/graphql. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200

where <MY_APP_ID> is my verified Realm app ID. The app is running locally on localhost:3000. I’ve configured the authorization headers to accept an apiKey and I’ve also put http://localhost:3000 in the App Settings/Allowed Request Origins:

Screen Shot 2022-08-07 at 3.19.27 PM

Still no luck. Here’s my apollo config:

// plugins/apollo-config.js
export default (context) => {
  return {
    httpEndpoint: 'https://us-east-1.aws.realm.mongodb.com/api/client/v2.0/app/<MY_APP_ID>/graphql',
    httpLinkOptions: {
      headers: {
        'apiKey': '<MY_API_KEY>',
      }
    }
  }
}

which is reference in nuxt.config.js:

export default {
  ...
  modules: [
    '@nuxtjs/apollo'
  ],

  apollo: {
    clientConfigs: {
      default: '~/plugins/apollo-config.js'
    }
  },
  ...
}

I’ve read this thread already, but the issue was not resolved and I’ve verified the suggestions regarding authorization headers. Any help or guidance is appreciated!