试图获取有关经过身份验证的用户的信息

Question

我使用 Azure 移动应用程序使用以下代码进行 Google 身份验证：

var client = new WindowsAzure.MobileServiceClient(appUrl);
    client.login("google").done(function (results) {
    console.log("You are now logged in as: " + results.userId);                             
}, function (err) {
       console.log("Error: " + err);
    });

它有效。但是当我尝试获取有关经过身份验证的用户的信息时，在完成功能中添加代码：

var url = client.applicationUrl + '/.auth/me';
fetch(url)
    .then(function (data) {
          return data.json()
     }).then(function (user) {
// The user object contains the claims for the authenticated user
});

我收到以下错误：

Fetch API 无法加载 https://accounts.google.com/o/oauth2/v2/auth?response_type=code&client_id=3… 请求中不存在“Access-Control-Allow-Origin”标头 资源。因此，Origin 'null' 不允许访问。如果一个不透明 响应满足您的需求，将请求的模式设置为“no-cors”以 获取禁用 CORS 的资源。

此错误与跨域请求有关，可以通过两种方式解决：

1. 使用jsonp代替json，但我不知道fetch函数如何与jsonp一起工作。
2. 最好使用CORS，这个CORS选项应该在谷歌开发者控制台中激活。

可能的问题是，我的 Web 应用程序和 Azure 移动应用程序位于不同的域中，但我将这两个域都添加到了 Google 开发人员控制台上的 Authorized JavaScript origins。

顺便说一句，我在 Chrome 中遇到了上述错误。如果我尝试使用 Edge，则会收到以下错误：

SCRIPT5022: ReferenceError: 'fetch' 未定义

因为 Edge 还不支持 fetch。

Answer 1

我建议将以下配置应用于您的 Azure 移动服务found here.

   <system.webServer>
    <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*" />
        <add name="Access-Control-Allow-Headers" value="Content-Type" />
      </customHeaders>
    </httpProtocol>
  </system.webServer>

或者，这可能是post here 中讨论的错误。