Facebook护照认证：“拒绝在框架中显示“ URL”，因为它将“ X-Frame-Options”设置为“ DENY”。”

Question

Refused to display 'https://www.facebook.com/login.php?skip_api_login=1&api_key=XXXXX&signed_next=1&next=https%3A%2F%2Fwww.facebook.com%2Fv2.2%2Fdialog%2Foauth%3Fredirect_uri%3Dhttp%253A%252F%252FX%252Fauth%252Ffacebook%252Fcallback%26response_type%3Dcode%26client_id%XXXX%26ret%3Dlogin&cancel_uri=http%3A%2F%2FXXXX%2Fauth%2Ffacebook%2Fcallback%3Ferror%3Daccess_denied%26error_code%3D200%26error_description%3DPermissions%2Berror%26error_reason%3Duser_denied%23_%3D_&display=page' in a frame because it set 'X-Frame-Options' to 'DENY'.

我正在将Facebook身份验证添加到我的Express应用中，并且仅当我在Heroku上载并尝试使用它时才收到此错误（我在localhost上未收到此错误）。 这是我的服务器代码：

var passport = require('passport');
var FacebookStrategy = require('passport-facebook').Strategy;

passport.use(new FacebookStrategy({
 clientID: 'x',
 clientSecret: 'x',
 callbackURL: 'http://x/auth/facebook/callback'
 },
 function(accessToken, refreshToken, profile, done) {
  (DB query)        
 }
));

app.get('/auth/facebook', passport.authenticate('facebook'));
app.get('/auth/facebook/callback', 
  passport.authenticate('facebook', { successRedirect: '/',
                                      failureRedirect: '/auth/facebook' }));

然后，我只是在做一个简单的链接来登录：

<a href="/auth/facebook/">
    <img src="facebooklogin.png" alt="Log in with Facebook">
</a>

我试图从其他人的问题中找到解决方案，但无济于事，我只是以与他们网站上的示例相同的方式使用Passport的Facebook策略。 再说一次，如果我将站点URL从developers.facebook.com更改为localhost并尝试以这种方式登录，那么它可以很好地工作，并且在我将其允许在一个帐户上使用后，我可以使用该帐户在Heroku上登录也一样 我究竟做错了什么？

Answer 1

将应用程序上传到heroku时，尝试在开发人员页面上的Facebook应用程序上更改回调URL，并将其更改为完全限定的URL，例如“ example.herokuapp.com/auth/facebook/callback”

Answer 2

您是否尝试添加target="_top" ？ 我做到了，它解决了我的问题。

如所示：

加载Iframe Facebook（X-Frame-Options拒绝加载）