X-Frame-Options错误

Question

我一直在使用 Google+ 登录的 API，

1. 当用户在我创建的 API 应用中链接他的新账户（也就是还没有登录 Google+ 社交网络）时，
2. 用户会被引导到创建 Google+ 个人资料的页面。
3. 当用户按下提交按钮后，页面会跳转到一个网址，但之后不再加载，屏幕变成空白，用户不知道他们的 Google+ 账户是否创建成功。

我追踪到的错误信息是：

由于 X-Frame-Options 的限制，无法加载： https://accounts.google.com/o/oauth2/auth?XXXXXXXX 不允许跨域框架。

所以它没有继续跳转到那个网址，因为 X-Frame-Options 阻止了这个操作。

我查了一下关于 X-Frame-Options 的资料，了解到它应该在响应头中设置。

我该如何在这个头部中设置它：

<meta name="google-signin-clientid" content="{{=response.CLIENT_ID}}" />
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/plus.login" />
<meta name="google-signin-requestvisibleactions" content="http://schemas.google.com/AddActivity" />
<meta name="google-signin-cookiepolicy" content="single_host_origin" />

而我渲染按钮的方式是：

(function() {
   var po = document.createElement('script');
   po.type = 'text/javascript'; po.async = true;
   po.src = 'https://apis.google.com/js/client:plusone.js?onload=render';
   var s = document.getElementsByTagName('script')[0];
   s.parentNode.insertBefore(po, s);
 })();
 function render() {

   // Additional params including the callback, the rest of the params will
   // come from the page-level configuration.
   var additionalParams = {
     'callback': signinCallback,
     'immediate': false,

   };
   // Attach a click listener to a button to trigger the flow.
   var signinButton = document.getElementById('signinButton');
   signinButton.addEventListener('click', function() {
     gapi.auth.signIn(additionalParams); // Will use page level configuration
   });
 }

还有其他方法可以设置吗？或者这个错误该怎么解决？我的后端部分是用 Python 写的。

Answer 1

我也遇到过这个问题，但我发现了我这边发生了什么。

我正在开发一个在Google App Engine上运行的应用，使用的是Golang语言。我从Google的文档中复制了一段代码，这段代码是用来设置Google+登录按钮的，然后把它粘贴到我的模板里。代码大概是这样的，直接来自于Google文档：

        <span
           class="g-signin"
           data-callback="signinCallback"
           data-clientid="CLIENT_ID"
           data-cookiepolicy="single_host_origin"
           data-requestvisibleactions="http://schema.org/AddAction"
           data-scope="https://www.googleapis.com/auth/plus.login">

我没有把我的真实clientId替换掉“CLIENT_ID”，这就是问题所在。我把“CLIENT_ID”这个字符串替换成了我Google App Engine的CLIENT_ID，问题就解决了。我是通过在Chrome开发者工具的网络标签中查看网络请求和响应信息，发现了这个奇怪的请求，它还在使用“CLIENT_ID”，看起来就是不对。

经过进一步检查代码，确实是我这边的问题。

希望这能帮到你！