Javascript API GET request CORS error

Question

I'm very new so apologies if I use the wrong terminology. I am trying to pull data using Trello API but receive the following error in Chrome console:

Failed to load https://api.trello.com/1/cards/5a42e19364345a7d84ba3f5f/members : The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin ' http://localhost:8080 ' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

After doing some research I have found this is a CORS problem. I am using Google App Engine with Python. Is this error something I can fix or is it a bug with the API? I have managed to do a POST request using this API no problem. I have read lots of information about CORS but haven't found a solution to the problem.

Here is my Javascript code for the GET request, it is just copy/pasted from the Trello API so I'm not sure what's wrong:

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);

Answer 1

It looks like you are trying to combine together two different ways of working with Trello's API - using client.js and making direct HTTP requests.

I'd recommend starting off with using only client.js as it provides a number of helper functions when working with Trello's API. For instance, the .authorize() method will walk you through generating a token for your API key and will store it locally. To make the request to get a card's data you have in your example using only client.js your code should look something like this:

<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>

You'll need to include your API (obtained from visiting trello.com/app-key while logged into Trello) when you include client.js in the script. Replace the XXXXXXXXX above with your API key.

If you'd rather make direct HTTP requests to Trello's API, you will need to generate a Token (you can do so from the same page you retrieved your API key) and your code will look something like this:

<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>

Again, you'll need to add in your API key and token.

Javascript API GET request CORS error

Question

1 answers

solution1
0 2018-01-17 19:21:20

Javascript API GET request CORS error

Question

1 answers

solution1 0 2018-01-17 19:21:20

solution1
0 2018-01-17 19:21:20