Angular/Node/Express/Passport跨域問題 - 啓用CORS Passport Facebook身份驗證

在NodeJS/Express中使用Passport嘗試使用Facebook對用戶進行身份驗證時，已有兩天，一百萬次嘗試啓用CORS。Angular/Node/Express/Passport跨域問題 - 啓用CORS Passport Facebook身份驗證

我得到在Chrome的錯誤是這樣的：

XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%…%3A8080%2Fauth%2Ffacebook%2Fcallback&scope=email&client_id=598171076960591. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:8080' is therefore not allowed access.

我使用的路線是那樣簡單：

// ===================================== 
// FACEBOOK ROUTES ===================== 
// ===================================== 
// route for facebook authentication and login 

app.get('/auth/facebook', passport.authenticate('facebook', { scope : 'email' })); 

// handle the callback after facebook has authenticated the user 
app.get('/auth/facebook/callback', 
    passport.authenticate('facebook', { 
     successRedirect : '/home', 
     failureRedirect : '/login' 
    }));

這是路線怎麼叫我angularJS文件（我「以前也嘗試設置withCredentials：TRUE）：

$http.get('/auth/facebook') 
    .success(function(response) { 

    }).error(function(response){ 

    });

我已經嘗試了十幾個方案，我發現這裏在StackOverflow和其他論壇上。

我試圖在routes.js文件我之前航線上增加這樣的：

app.all('*', function(req, res, next) { 
    res.header('Access-Control-Allow-Origin', '*'); 
    res.header("Access-Control-Allow-Headers", "Content-Type,X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Date, X-Api-Version, X-File-Name"); 
    res.header('Access-Control-Allow-Methods', 'GET,POST,PUT,HEAD,DELETE,OPTIONS'); 
    res.header('Access-Control-Allow-Credentials', true); 

    if ('OPTIONS' == req.method) { 
     res.send(200); 
    } else { 
     next(); 
    } 
});

我試着server.js文件中添加這種（請注意，我改變了頭，但的setHeader我已經試過這兩種）：

app.use(function(req, res, next) { 
    res.setHeader('Access-Control-Allow-Origin', '*'); 
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type,X-Requested-With'); 
    res.setHeader('Access-Control-Allow-Methods', 'GET,POST,PUT,HEAD,DELETE,OPTIONS'); 
    res.setHeader('Access-Control-Allow-Credentials', true); 

    if ('OPTIONS' == req.method) { 
    res.send(200); 
    } else { 
    next(); 
    } 

}); 

require('./app/routes.js')(app, passport);

我試圖在我的app.js文件中添加這個（angularJS配置）：

$httpProvider.defaults.useXDomain = true; 
delete $httpProvider.defaults.headers.common['X-Requested-With']; 
$httpProvider.defaults.withCredentials = true;

無論如何，我不知道還有什麼要做。我在網上找到的所有東西都沒用。有沒有可能與我使用AngularJS Routing有關？我看不出有什麼理由爲什麼這很重要，但我有點用不着猜測。

我的情況非常相似，這一個：提前 Angular/Node/Express/Passport - Issues when connecting to facebook(CORS)

謝謝！

來源

2014-09-25 Larissa Leite

可能重複[？如何允許快遞/ CORS的NodeJS（http://stackoverflow.com/questions/7067966/how-to-allow-cors-in-express -nodejs） – 2014-09-25 06:52:18

我知道有很多類似的問題，我幾乎看到了所有這些問題。不幸的是，迄今爲止我所嘗試的解決方案都沒有奏效...... – 2014-09-25 10:59:06

您不能在同一時間同時使用'訪問控制 - 允許 - 憑證：true'和'Access-Control-Allow-Origin：*''。對於你的情況，你應該設置'訪問控制 - 允許 - 原產地：本地主機：8080'而不是'*'。 – wuct 2015-07-15 14:23:27

我也有一個Facebook登錄和Cors的問題，但沒有護照在NodeJS/Express，我的應用程序是java（spring mvc）+ angular。我已經成功地越過問題修改我最初的FB登錄功能：

$scope.loginWithFacebook = function() { 
    $http({ 
     method: 'GET', 
     url: 'auth/facebook', 
     dataType: 'jsonp' 
    }).success(function(data){ 
     console.log('loginWithFacebook success: ', data); 
    }).error(function(data, status, headers, config) { 
     console.log('loginWithFacebook error: ', data); 
    }); 
}

與

$scope.loginWithFacebook = function() { 
    $window.location = $window.location.protocol + "//" + $window.location.host + $window.location.pathname + "auth/facebook"; 
};

希望它能幫助！

來源

2014-10-15 07:29:05

你能解釋爲什麼你的改變有效嗎？ – mikestaub 2015-01-25 07:26:48

謝謝，這個作品：D – phamductri 2016-05-18 07:29:13

@mikestaub你不能調用服務器API，這將導致從前端302（重定向）所以你將不得不直接發送用戶到服務器 – 2016-10-02 10:39:46

我遇到了這個問題，幾乎達到了我確信我找不到解決方案的地步，但再次看一個簡單的教程（http://mherman.org/blog/2013/11/10/social-authentication-with-passport-dot-js/）爲我解決了這個問題。我試圖從Angular進行API調用，直到Node.js，儘管在服務器上配置了CORS，CORS總是會給你帶來XMLHttpRequest錯誤！ CORS不是裝置 - 如果您打開了Chrome網絡控制檯，則會發現您對Google或Facebook或任何第三方網站的請求無法控制更改 - 它是由重新發送的302重定向觸發的你的前端，Angular.js或任何其他框架無法控制的東西，因此你無法真正將「訪問控制允許源」添加到該請求中。

解決方案只是簡單地使按鈕或文字說「用_____登錄」一個鏈接。鏈接文字<a href="/auth/facebook"></a>。而已。

當然，我還遇到了很多其他的絆腳石和陷阱。我試圖不使用默認中間件passport.authenticate（'臉譜'），但試圖把它包裝在function(req, res, next){ ... }，認爲會做些事情，但事實並非如此。

來源

2015-02-20 13:15:28 Gary

我使用UI-Router。我嘗試了鏈接，但被$ urlRouterProvider.otherwise（'/'）;'抓住並帶我到我的主頁。有什麼想法嗎？ – 2015-08-15 06:26:22

@AdamZerner，它只是因爲你嘗試的鏈接不是有效的「前端URL」（或者說沒有角度路由器識別的URL），那就是$ urlRouterProvider.otherwise（'/'）;這個解決方案實際上很簡單，你只需要將'target ='_ self''添加到一個標籤，它將繞過角度路由器。 – spiritwalker 2016-02-03 09:35:54

嘿，我被困在與原始問題完全相同的問題上。 ** Gary的回答和spiritwalker的評論相結合，解決了所有與CORS錯誤和重定向有關的問題。像魅力一樣工作。**謝謝@加里和靈魂行者。 – Stuci 2017-01-18 08:51:21

創建一個html標記來執行GET請求，而facebook不允許XMLHttpsRequests。

像這樣： <a href="http://localhost:8080/auth/facebook">sign in with facebook</a>

的

來源

2018-02-28 14:05:25

Angular/Node/Express/Passport跨域問題 - 啓用CORS Passport Facebook身份驗證

回答

相關問題