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

问题描述

我在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 Realm文档中发现Task Tracker (web) tutorial之后，我意识到了这个问题。我需要使用Realm javascript SDK通过我的应用程序ID和身份验证提供程序登录Realm。

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

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