电视和设备的Google登录的CORS问题

Question

我需要允许用户在电视上使用Google登录，因此我正在使用电视和设备的登录流程（ https://developers.google.com/identity/sign-in/devices ）

在邮递员或卷曲的人，它工作正常。 但是，在我的浏览器中，我收到此CORS错误：

XMLHttpRequest无法加载https：//accounts.google.com/o/oauth2/device/code。 所请求的资源上没有“ Access-Control-Allow-Origin”标头。 因此，不允许访问源“ http：// localhost：81”。 响应的HTTP状态码为400。

这是我的代码：

var data = {
    client_id: '<my cliendId>',
    scope: 'email'
};
var r = new XMLHttpRequest();
r.open('POST', 'https://accounts.google.com/o/oauth2/device/code', true);
r.setRequestHeader("Content-type", "application/json");
r.onreadystatechange = function () {
    if (r.readyState === XMLHttpRequest.DONE) { 
        if (r.status === 200) {
           console.log('hooray!');
        }
        else {
            console.log('oh no');
        }
    }
};
r.send(JSON.stringify(data));

对于Web登录，有必要将用户重定向到google页面，这可以避免CORS问题。 但是，对于电视/设备登录，我应该找回一个代码以显示给用户，以便他们可以进入计算机并授予许可。

顺便说一句，此代码位于iframe中。 我在iframe外部进行了测试，并遇到了同样的问题。

更新我将setRequestHeader更新为'r.setRequestHeader（“ Content-type”，“ application / x-www-form-urlencoded”）;' 并发送到“ r.send（“ client_id =＆scope = email”）;”。

• 控制台日志告诉我“ https：//accounts.google.com/o/oauth2/device/code。请求的资源上没有'Access-Control-Allow-Origin'标头。来源' http：// localhost ：81 '因此不允许访问。“，
• devtools中的“网络”标签显示状态代码= 200（“响应”中仍然没有显示），
• 但是在检查r.status的代码中，我看到status = 0。

有没有人看到使用javascript在电视/设备上使用Google登录的示例？

Answer 1

您遇到的问题不是CORS。 您收到错误响应。 错误响应没有Access-Control-Allow-Origin标头。

使用浏览器的开发人员工具检查HTTP响应。 运气好的话，它会包含真正的错误消息。

Answer 2

我通过使用后端服务器使它正常工作。 因此，要在电视上向用户显示google登录代码：1.客户端（TV）向我的服务器发出http请求，2.我的服务器用我的凭据查询google，3.谷歌回复我的服务器，4。我的服务器响应我的客户端，显示代码。

我仍然不认为这是文档描述的方式，但至少现在可以使用了。

Answer 3

为了将来参考，我遇到了同样的问题：

问题是Chrome不支持localhost来访问Access-Control-Allow-Origin。 我的解决方案是安装此处提到的Chrome扩展程序： 请求的资源错误中没有“ Access-Control-Allow-Origin”标头

这样，您可以使用superagent或fetch在浏览器中执行请求。