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拒絕加載）