控制台中的Youtube API错误，用于＆＃39; X-Frame-Options＆＃39;和#or; sameorigin＆＃39;。和net :: ERR_BLOCKED_BY_RESPONSE

Question

在http://localhost

上运行时，我的auth.js收到两个错误

Refused to display 'https://accounts.google.com/o/oauth2/auth?client_id=161882282037-ol1lu4rp1q9qs17qsfjub0q2fil7au9a.apps.googleusercontent.com&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube&immediate=true&include_granted_scopes=true&proxy=oauth2relay345555543&redirect_uri=postmessage&origin=http%3A%2F%2Flocalhost&response_type=token&gsiwebsdk=1&state=796381777%7C0.998470879&authuser=0&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.2sYoz5cQVqo.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCNCqOBGqlGE0dE8R-n44r2KGTwetA' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
cb=gapi.loaded_0:545 GET https://accounts.google.com/o/oauth2/auth?client_id=161882282037-ol1lu4rp1q9qs17qsfjub0q2fil7au9a.apps.googleusercontent.com&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fyoutube&immediate=true&include_granted_scopes=true&proxy=oauth2relay345555543&redirect_uri=postmessage&origin=http%3A%2F%2Flocalhost&response_type=token&gsiwebsdk=1&state=796381777%7C0.998470879&authuser=0&jsh=m%3B%2F_%2Fscs%2Fapps-static%2F_%2Fjs%2Fk%3Doz.gapi.en.2sYoz5cQVqo.O%2Fm%3D__features__%2Fam%3DAQ%2Frt%3Dj%2Fd%3D1%2Frs%3DAGLTcCNCqOBGqlGE0dE8R-n44r2KGTwetA net::ERR_BLOCKED_BY_RESPONSE

这是我的auth.js代码：

// The client ID is obtained from the {{ Google Cloud Console }}
// at {{ https://cloud.google.com/console }}.
// If you run this code from a server other than http://localhost,
// you need to register your own client ID.
var OAUTH2_CLIENT_ID = '161882282037-ol1lu4rp1q9qs17qsfjub0q2fil7au9a.apps.googleusercontent.com';
var OAUTH2_SCOPES = [
  'https://www.googleapis.com/auth/youtube'
];

// Upon loading, the Google APIs JS client automatically invokes this callback.
googleApiClientReady = function() {
  gapi.auth.init(function() {
    window.setTimeout(checkAuth, 1);
  });
}

// Attempt the immediate OAuth 2.0 client flow as soon as the page loads.
// If the currently logged-in Google Account has previously authorized
// the client specified as the OAUTH2_CLIENT_ID, then the authorization
// succeeds with no user intervention. Otherwise, it fails and the
// user interface that prompts for authorization needs to display.
function checkAuth() {
  gapi.auth.authorize({
    client_id: OAUTH2_CLIENT_ID,
    scope: OAUTH2_SCOPES,
    immediate: true
  }, handleAuthResult);
}

// Handle the result of a gapi.auth.authorize() call.
function handleAuthResult(authResult) {
  if (authResult && !authResult.error) {
    // Authorization was successful. Hide authorization prompts and show
    // content that should be visible after authorization succeeds.
    $('.pre-auth').hide();
    $('.post-auth').show();
    loadAPIClientInterfaces();
  } else {
    // Make the #login-link clickable. Attempt a non-immediate OAuth 2.0
    // client flow. The current function is called when that flow completes.
    $('#login-link').click(function() {
      gapi.auth.authorize({
        client_id: OAUTH2_CLIENT_ID,
        scope: OAUTH2_SCOPES,
        immediate: false
        }, handleAuthResult);
    });
  }
}

// Load the client interfaces for the YouTube Analytics and Data APIs, which
// are required to use the Google APIs JS client. More info is available at
// https://developers.google.com/api-client-library/javascript/dev/dev_jscript#loading-the-client-library-and-the-api
function loadAPIClientInterfaces() {
  gapi.client.load('youtube', 'v3', function() {
    handleAPILoaded();
  });
}

这是我第一次尝试使用youtube api，所以我不确定我在这里做错了什么？

我在开发者控制台中的api和客户端ID如下所示：

Answer 1

X-Frame-Options是服务器（accounts.google.com）发送的HTTP标头。当网页（例如http://localhost）告知浏览器在＆＃34;主机＆＃34;内显示另一个页面（例如https://accounts.google.com/o/oauth2/...）时通过iFrame页面，它将首先检查嵌入页面是否发送此标题。如果设置为sameorigin，则浏览器将拒绝呈现iFrame。 sameorigin表示此页面只能直接访问或嵌入到具有相同源（=相同域）的页面中。

这是一种安全机制。服务器告诉浏览器：＆＃34;请不要将我嵌入到其他网页中，这可能会给用户带来安全风险。＆＃34;当然，浏览器不必遵守此请求，但我甚至可以说所有主流浏览器都这样做 - 因为它们旨在保证用户的安全。如果有人要设计他/她自己的网络浏览器，他/她当然可以选择忽略标题并渲染iFrame。

这对您来说意味着您必须将用户重定向到授权页面（https://accounts.google.com/o/oauth2/...）而不是嵌入它。现在，既然您使用客户端库和官方示例，那么问题就是为什么这不起作用。我最好的猜测是，谷歌已经改变了他们的OAuth政策来阻止跨域嵌入，但还没有更新他们的图书馆文档来解释这一变化。由于我不熟悉JavaScript客户端库，因此我看到的唯一可行选项是手动执行授权，不使用库，然后使用该库来获取实际的YouTube API请求。