XMLHttpRequest 无法加载 https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=答案

【问题标题】：XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=XMLHttpRequest 无法加载 https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=
【发布时间】：2019-09-03 17:19:24
【问题描述】：

我正在尝试将我的应用程序的 facebook 登录集成到 nodejs 中，angularjs 使用 passport-facebook 模块。

我可以在没有 angularjs 的情况下集成 facebook 身份验证，但是当我使用 angular http.get('/auth/facebook') 我得到以下错误

XMLHttpRequest cannot load https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=http%…%2Flocalhost%3A1439%2Fauth%2Ffacebook%2Fcallback&client_id=xxxxxxxx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:1439' is therefore not allowed access.
app.js:153 err

下面是我的角码

var headers = {
                'Accept': 'text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8',
                'Content-Type': 'text/html'
            };
    $scope.fblogin=function(){
        // $window.location.href='/auth/facebook';
        $http({
         url:'/auth/facebook',
        method:'GET',
       headers: headers
        }).success(function(data){
            console.log(data);
        }).error(function(){
            console.log('err');
        });
    };

pp.config(['$routeProvider','$httpProvider',
  function($routeProvider,$httpProvider) {
        $httpProvider.defaults.useXDomain = true;
        $httpProvider.defaults.headers.common = 'Content-Type: application/json';
        delete $httpProvider.defaults.headers.common['X-Requested-With'];

NodeJs

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

**注意：**我已尝试更改 $http.get() 的多个标头更改

【问题讨论】：

标签： javascript angularjs node.js facebook

【解决方案1】：

解决方案：

链接https://www.facebook.com/dialog/oauth?... 不是为将其称为ajax 而设计的，因为它必须将用户重定向到facebook 登录页面（因此当您通过ajax 调用它时，重定向是不可能的）。

只需在 html 适当的元素中准备，而不是发出 ajax 请求：

<a href="https://www.facebook.com/dialog/oauth?..." > ... </>

这行得通:)

【讨论】：

【解决方案2】：

这是我为避免 Angular 将 facebook auth 对话 API 调用为 AJAX 请求所做的。

在您的 Angular 控制器功能 中使用 'window.location="http://localhost:3000/auth/facebook"';，从那里您将请求发送到包含 passport.authenticate 内容的 Express 服务器。

示例：

$scope.authFacebook = function() { window.location="http://localhost:3000/facebook" }

【讨论】：

【解决方案3】：

您正在尝试对 URL 进行 ajax 调用，但由于跨源安全性，浏览器正在拒绝该 ajax 请求。

这有几个可能的原因：

该 URL 的域不允许跨源请求。
您没有以正确的方式发出请求以使跨源请求成功。
您的请求格式不正确（针对正确的 URL 或使用正确的选项发送）。

仅供参考，您设置 allow-origin 标头的 node.js 代码与尝试向 Facebook 发送 ajax 调用的浏览器代码完全无关。该代码将允许其他人的网站向您的 node.js 服务器发出跨源请求。

您发布的内容有点令人困惑的是，您显示的 $http() 调用的 URL 与您在错误消息中收到的 URL 不同，所以我想知道您是否正在查看错误的错误代码。

【讨论】：

/auth/facebook 是启动 url，/auth/facebook/callback 是响应标头中的回调，这 /auth/facebook/callback 是重定向 uri

【解决方案4】：

此解决方案适用于我，添加到 cors 以表达应用程序

var cors = require('cors')
var app = express()

app.use(cors())

【讨论】：