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

Why are you using `withCredentials = true`? Do you know [what it does](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/withCredentials)? — Phil, Dec 27 '17 at 00:56
Yes. If I set it to false it doesn't authenticate. Also why on earth did you mark this question as a duplicate? I am not using Java/Spring/Angular/SockJS, how are any of those answers supposed to help me? None of the answers apply and the issue only occurred for the OP in Chrome. — user9109814, Dec 27 '17 at 01:11
Why aren't you using the [`client.js` API to perform the requests](https://developers.trello.com/v1.0/docs/clientjs#section-using-the-api)? Presumably it stores the required credentials after authorization and adds them to the request as parameters / headers. Also, I'd say you would need to perform these actions **after** authorization is successful (ie in the `authenticationSuccess` callback) — Phil, Dec 27 '17 at 01:16
I assumed I was using `client.js` as it is included in my HTML `` everything else in my javascript is copied from their documentation with the appropriate keys added. — user9109814, Dec 27 '17 at 01:47
What do you mean? You are clearly creating a new `XMLHttpRequest` object in your code and attempting to use that. You should be using `Trello.members.get('5a42e1936434a7d84ba3f5f', members => { ... })` or something similar. — Phil, Dec 27 '17 at 01:53
I've raised an API docs bug for you ~ https://github.com/trello/api-docs/issues/150 — Phil, Dec 27 '17 at 02:13
In the meantime, I do suggest you try and use the `Trello` object methods. — Phil, Dec 27 '17 at 02:23
Thanks for taking a look and submitting the request, I am taking a look at those methods now. — user9109814, Dec 27 '17 at 02:28

score 0 · Answer 1 · answered Jan 17 '18 at 19:21

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

1 Answers1