Vue/Apollo/Realm: CORS issue

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<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: '<MY_APP_ID>/graphql',
    httpLinkOptions: {
      headers: {
        'apiKey': '<MY_API_KEY>',

which is reference in nuxt.config.js:

export default {
  modules: [

  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!