Перенаправление API.В запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin» - PullRequest
0 голосов
/ 24 августа 2018

Я разрабатываю двустороннее приложение, спереди в Angular6 и обратно в NodeJS , которое показывает временные шкалы из разных социальных сетей.

Как обычно,API каждой социальной сети имеет свой собственный рабочий процесс, но все они (по крайней мере, Facebook, Twitter и Instagram) имеют перенаправления после входа в систему.Я управлял бэкэндом для извлечения данных в JSON после всего процесса, но кажется, что фронт не правильно управляет перенаправлениями.

Похоже, это CORS проблема, и я пытался разрешить это в обе стороны, но безуспешно.Я поставил код для вызова Facebook:

Backend (NodeJS)

sserve.js

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

app.get('/authorize/:clientId/:network', authUtils.authorize);

app.get('/:network/authCallback', (request, response) => {
  let network = request.params.network;

  switch(network) {
    case 'facebook':
      authUtils.authorizeFacebook(request, response);
    break;

    case 'twitter':
      authUtils.authorizeTwitter(request, response);
    break;

    case 'instagram':
      authUtils.authorizeInstagram(request, response);
    break;

    default:
      response.status(500).send(network + ' is not configured');
  }
});

authUtils.js

async function authorize(request, response, next) {
  try {
    let clientId = request.params.clientId;
    let network = request.params.network;

    config = await databaseUtils.getConfig(clientId, network);

    if(typeof(config) !== 'undefined') {
      configPassport(network);
      return passport.authenticate(network)(request, response, next);
    } else {
      response.status(500).send(network + ' is not configured');
    }  
  } catch (e) {
    response.status(500).send(e);
  }
}

function authorizeFacebook(request, response) {
  if(typeof(config) !== 'undefined') {
    const fb = require('fb');

    fb.api('oauth/access_token', {
      client_id: config.appId,
      client_secret: config.appSecretKey,
      redirect_uri: config.redirectUri,
      code: request.query.code
    }, function (res) { 
      if(!res || res.error) {
        response.status(500).send(!res ? 'error occurred' : res.error);
      } else {
        fb.api(
          '/' + config.pageId + '/posts',
          'GET',
          { "access_token": res.access_token },
          function (feedResponse) {
            if (feedResponse && !feedResponse.error) {
              response.setHeader('Content-Type', 'application/json');
              response.write(JSON.stringify(feedResponse.data));
              response.end();
            } else {
              response.status(500).send(feedResponse.error);
            }
          }
        );
      }
    });
  } else {
    response.status(500).send('Facebook is not configured');
  }
}

При прямом вызове на сервер работает отлично.

Фронтенд (Angular6)

facebook.component.ts

ngOnInit() {    
  this.parseParams();

  this.service.getClientAppConfig(this.clientId, 'facebook', function(data) {
    if (data) {
      this.data += data;
    }
  });
}

parseParams() {
  this.sub = this.route.params.subscribe(params => {
    this.clientId = +params['clientId'];
  });
}

data.service.ts

getClientAppConfig(clientId, network, callback) {
  var url = this.apiUrl + environment.endpoints.authorize + clientId + '/' + network;
  this.http.get(url)
  .subscribe(data => {
    return callback(data);
  });
}

При вызове приложения Angular6 возвращается:

Не удалось загрузить https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=https%3A%2F%2F127.0.0.1%2Ffacebook%2FauthCallback%2F&client_id=XXXXXXXXXXXXXXX: Перенаправление с 'https://www.facebook.com/dialog/oauth?response_type=code&redirect_uri=https%3A%2F%2F127.0.0.1%2Ffacebook%2FauthCallback%2F&client_id=XXXXXXXXXXXXXXX' на' https://www.facebook.com/login.php?skip_api_login=1&api_key=XXXXXXXXXXXXXXX&signed_next=1&next=https%3A%2F%2Fwww.facebook.com%2Fv3.1%2Fdialog%2Foauth%3Fredirect_uri%3Dhttps%253A%252F%252F127.0.0.1%252Ffacebook%252FauthCallback%252F%26response_type%3Dcode%26client_id%3D2072797142937400%26ret%3Dlogin%26logger_id%3Db22ad072-92cf-00d8-17a6-7659ebfc8f43&cancel_url=https%3A%2F%2F127.0.0.1%2Ffacebook%2FauthCallback%2F%3Ferror%3Daccess_denied%26error_code%3D200%26error_description%3DPermissions%2Berror%26error_reason%3Duser_denied%23_%3D_&display=page&locale=es_ES&logger_id=b22ad072-92cf-00d8-17a6-7659ebfc8f43' заблокировано политикой CORS: нет заголовка 'Access-Control-Allow-Origin'присутствует на запрашиваемом ресурсе.Исходный объект 'null', следовательно, не имеет доступа.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...