使用 Axios 连接到 MongoDB Realm GraphQL 端点时如何避免 CORS 问题?

How to avoid CORS issues when connecting to MongoDB Realm GraphQL endpoint with Axios?

我在 MongoDB Atlas 中有一个测试数据库。使用 MongoDB 领域服务,我已经能够为数据库设置一个 GraphQL 端点。

我可以 运行 使用他们的沙箱 (GraphiQL) 在内部进行查询。

配置 API 密钥身份验证提供程序后...

...我能够 运行 从 Postman 外部查询,调用 https://realm.mongodb.com/api/client/v2.0/app/<MY_APP_ID>/graphql

但是,尝试使用 axios 进行相同的调用...

await axios({
  method: 'POST',
  url:
    'https://realm.mongodb.com/api/client/v2.0/app/<MY_APP_ID>/graphql',
  headers: {
    apiKey: '<MY_API_KEY>',
    'Content-Type': 'application/json',
  },
  data: {
    query: `
      {
        item {
          _id
          name
          description
        }
      }
    `
  }
})

...给出 CORS 错误。

我是否需要在 Realm 中配置某些东西,或者我缺少 header 以允许从浏览器外部访问 GraphQL 端点?

在 MongoDB 领域文档中发现 Task Tracker (web) tutorial 后,我意识到了这个问题。我需要使用 Realm javascript SDK 来使用我的应用程序 ID 和身份验证提供程序登录到 Realm。

您可以使用您在 Realm 仪表板中启用的任何身份验证提供程序(username/password、API 密钥、Google 等),但它们都是 return登录时的单个承载令牌。此承载令牌允许 cross-domain 查询 GraphQL 端点。

我也崩溃了,决定安装 Apollo Client 来完成所有与端点的对话。我最终实现的 React 解决方案的来源可以是 found here。它使用 RealmApp 与 Realm 进行通信,并使用 RealmApolloProvider 通过适当的 Realm 身份验证令牌与 GraphQL 进行通信。