Javascript API GET запрос CORS ошибка

Я очень новичок, так что извините, если я использую неправильную терминологию. Я пытаюсь получить данные с помощью Trello API, но получаю следующую ошибку в консоли Chrome:

Не удалось загрузить https://api.trello.com/1/cards/5a42e19364345a7d84ba3f5f/members: значение заголовка «Access-Control-Allow-Origin» в ответе не должно быть подстановочным знаком «*», если режим учетных данных запроса «включить». Таким образом, доступ к источнику 'http://localhost:8080' запрещен. Режим учетных данных запросов, инициированных XMLHttpRequest, управляется атрибутом withCredentials.

Проведя некоторое исследование, я обнаружил, что это проблема CORS. Я использую Google App Engine с Python. Я могу исправить эту ошибку или это ошибка API? Мне удалось сделать запрос POST с помощью этого API без проблем. Я прочитал много информации о CORS, но не нашел решения проблемы.

Вот мой код Javascript для запроса GET, он просто копируется/вставляется из API Trello, поэтому я не уверен, что не так:

var authenticationSuccess = function() {
  console.log('Successful authentication');
};

var authenticationFailure = function() {
  console.log('Failed authentication');
};

window.Trello.authorize({
  type: 'popup',
  name: 'Work Requests App',
  scope: {
    read: 'true',
    write: 'true' },
  expiration: 'never',
  success: authenticationSuccess,
  error: authenticationFailure
});

var data = JSON.stringify(false);

var xhr = new XMLHttpRequest();
xhr.withCredentials = true;

xhr.addEventListener("readystatechange", function () {
  if (this.readyState === this.DONE) {
    console.log(this.responseText);
  }
});

xhr.open("GET", "https://api.trello.com/1/cards/5a42e1936434a7d84ba3f5f/members");

xhr.send(data);

javascript cors trello
person user9109814    schedule 27.12.2017    source источник
comment
Почему вы используете withCredentials = true? Знаете ли вы, что он делает?   -  person Phil    schedule 27.12.2017
comment
Да. Если я установлю для него значение false, он не будет аутентифицироваться. Кроме того, с какой стати вы отметили этот вопрос как дубликат? Я не использую Java/Spring/Angular/SockJS, как любой из этих ответов должен мне помочь? Ни один из ответов не подходит, и проблема возникла только для OP в Chrome.   -  person user9109814    schedule 27.12.2017
comment
Открыт повторно. Не понимал, что это было так по-другому   -  person Phil    schedule 27.12.2017
comment
Почему вы не используете client.js API для выполнения запросы? Предположительно он сохраняет требуемые учетные данные после авторизации и добавляет их в запрос в качестве параметров/заголовков. Кроме того, я бы сказал, что вам нужно будет выполнить эти действия после успешной авторизации (т.е. в обратном вызове authenticationSuccess)   -  person Phil    schedule 27.12.2017
comment
Я предположил, что использую client.js, так как он включен в мой HTML <script src="https://api.trello.com/1/client.js?key={key}"></script>, все остальное в моем javascript скопировано из их документации с добавлением соответствующих ключей.   -  person user9109814    schedule 27.12.2017
comment
Что ты имеешь в виду? Вы явно создаете новый объект XMLHttpRequest в своем коде и пытаетесь его использовать. Вы должны использовать Trello.members.get('5a42e1936434a7d84ba3f5f', members => { ... }) или что-то подобное.   -  person Phil    schedule 27.12.2017
comment
Я поднял для вас ошибку документации API ~ github.com/trello/api-docs /вопросы/150   -  person Phil    schedule 27.12.2017
comment
А пока я предлагаю вам попробовать использовать Trello методы объекта.   -  person Phil    schedule 27.12.2017
comment
Спасибо, что посмотрели и отправили запрос, сейчас я изучаю эти методы.   -  person user9109814    schedule 27.12.2017

Ответы (1)


arrow_upward
0
arrow_downward

Похоже, вы пытаетесь объединить два разных способа работы с API Trello — используя client.js и делать прямые HTTP-запросы.

Я бы рекомендовал начать с использования только client.js, так как он предоставляет ряд вспомогательных функций при работе с API Trello. Например, метод .authorize() поможет вам сгенерировать токен для вашего ключа API и сохранит его локально. Чтобы сделать запрос на получение данных карты, которые у вас есть в вашем примере, используя только client.js, ваш код должен выглядеть примерно так:

<html>
  <script
    src="https://code.jquery.com/jquery-3.2.1.min.js"
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
    crossorigin="anonymous"></script>
  <script src="https://trello.com/1/client.js?key=XXXXXXXXX"></script>
  <script>

    var requestSuccess = function(response) {
      console.log(JSON.stringify(response, null, 2));
    }

    var authenticationSuccess = function() {
      console.log('Successful authentication');
      // Now that you are authenticated, you can start
      // making requests to the API
      window.Trello.rest("GET", "cards/5a42e1936434a7d84ba3f5f/members", requestSuccess);
    };

    var authenticationFailure = function() {
      console.log('Failed authentication');
    };

    window.Trello.authorize({
      type: 'popup',
      name: 'Work Requests App',
      scope: {
        read: 'true',
        write: 'true' },
      expiration: 'never',
      success: authenticationSuccess,
      error: authenticationFailure
    });
  </script>
</html>

Вам нужно будет включить свой API (полученный при посещении trello.com/app-key во время входа в систему). в Trello), когда вы включаете client.js в скрипт. Замените XXXXXXXXX выше своим ключом API.

Если вы предпочитаете делать прямые HTTP-запросы к API Trello, вам нужно будет сгенерировать токен (вы можете сделать это на той же странице, на которой вы получили свой ключ API), и ваш код будет выглядеть примерно так:

<html>
  <script>  
    var xhr = new XMLHttpRequest();

    xhr.addEventListener("readystatechange", function () {
      if (this.readyState === this.DONE) {
        console.log(this.responseText);
      }
    });

    var yourToken = "XXXXXXXXXX";
    var yourKey = "XXXXXXXXXX";

    xhr.open("GET", "https://api.trello.com/1/cards/5a42e1936434a7d84ba3f5f/members?key=" + yourKey + "&token=" + yourToken);

    xhr.send();
  </script>
</html>

Опять же, вам нужно будет добавить свой ключ API и токен.

person Bentley Cook    schedule 17.01.2018