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

【问题标题】：How to avoid CORS issues when connecting to MongoDB Realm GraphQL endpoint with Axios?使用 Axios 连接到 MongoDB Realm GraphQL 端点时如何避免 CORS 问题？
【发布时间】：2020-09-11 12:29:20
【问题描述】：

我在 MongoDB Atlas 中有一个测试数据库。使用 MongoDB Realm 服务，我已经能够为数据库设置 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 中配置一些内容，或者我缺少的标头以允许从浏览器外部访问 GraphQL 端点？

【问题讨论】：

标签： mongodb mongodb-atlas mongodb-realm mongodb-cloud

【解决方案1】：

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

您可以使用您在 Realm 控制面板中启用的任何身份验证提供程序（用户名/密码、API 密钥、Google 等），但它们都会在登录时返回单个不记名令牌。此不记名令牌允许跨GraphQL 端点的域查询。

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

【讨论】：

我实际上有同样的问题，除了我想通过Realm Docs 中显示的自定义 JWT。这令人困惑，因为文档似乎您可以通过标题传入，但会给出像您一样的 CORS 错误。如果可能的话，我想避免添加 realm-web 包，因为我正在使用另一个身份验证解决方案并且不想同时拥有两者。除了使用 realm-web 包之外，您是否碰巧找到了其他线索？我只想使用 fetch 来查询 GraphQL 端点
@mcdev 您需要将自定义 JWT 传递给 realm-web 登录以获取不记名令牌。如果没有该不记名令牌，GraphQL 端点将不接受 CORS 连接。除非您对他们的登录过程进行逆向工程，否则您几乎需要 realm-web 包来执行此操作。 realm-web 库的好处是它可以代表你完成所有的令牌存储、刷新等。
完全明白，谢谢！我要看看我是否可以联系 MongoDB，至少我会使用这个包。如果唯一的访问方式是请求不记名令牌，为什么他们甚至会强调将 JWT 作为标头传递并允许请求来源的能力，这对我来说似乎很奇怪。我犹豫的唯一原因是我不想让事情复杂化，因为我已经为我的身份验证过程存储了令牌等。不过谢谢你的回复。如果他们回复，我会及时通知您
@mcdev 它很可能是旧文档，因为当我努力解决这个问题时，我确实将api-key 标头更改为apiKey。在撰写本文时，Realm 是一项相对较新的收购项目，他们仍在迁移大量 Stitch 文档以与 Realm 保持一致。