Creating a task in Asana with JS (fail) and CURL (work)

Question

I am writing a quotation system for myself.

I have this web page for quotations, which does:
a) send an email to the customer (done) with the quoted items
b) create a record inside a google spreadsheet (done)
c) create a task in asana (fail)

For the last 2 days I have been surfing and reading all I can find, but the solution skips from my mind.

This is the CURL code, which works just fine:

curl -H "Authorization: Bearer 0/7alotofnumbers" \
   https://app.asana.com/api/1.0/tasks \
   -d "projects=83694179XXXXXX" \
   -d "tags[0]=269280227XXXXXX" \
   -d "assignee=sales@atmysite.com.mx" \
   -d "due_on=2017-02-09" \
   -d "name=testing with curl" \
   -d "notes=it works just as expected" \
   -d "followers[0]=myself@atmysite.com.mx"

Now, I translated the CURL command that WORKS into asanataskcreate.coffee:

$.ajax
  url: 'https://app.asana.com/api/1.0/tasks'
  beforeSend: (xhr) ->
    xhr.setRequestHeader 'Authorization', 'Bearer 0/7alotofnumbers'
    return
  contentType: 'application/json'
  method: 'get'
  data:
    projects: [ 83694179XXXXXX ]
    tags: [ 269280227XXXXXX ]
    assignee: 'sales@atmysite.com.mx'
    due_on: '2017-02-09'
    name: 'testing with js ajax'
    notes: 'it does not work'
    followers: [ 'myself@atmysite.com.mx' ]

which turns into asanataskcreate.js:

$.ajax({
  url: 'https://app.asana.com/api/1.0/tasks',
  beforeSend: function(xhr) {
    xhr.setRequestHeader('Authorization', 'Bearer 0/7alotofnumbers');
  },
  contentType: 'application/json',
  method: 'get',
  data: {
    projects: [83694179XXXXXX],
    tags: [269280227XXXXXX],
    assignee: 'sales@atmysite.com.mx',
    due_on: '2017-02-28',
    name: 'testing with js ajax',
    notes: 'it does not work',
    followers: ['myself@atmysite.com.mx']
  }
});

And, FAILS :(

Ok, I have tried:
a) method: 'post' and 'get'
b) place, remove the '[]' at projects, tags and followers

With the assistance of Chrome devtools in the 'console' I get the following message:

Failed to load resource: the server responded with a status of 400 (Bad Request)

and

XMLHttpRequest cannot load https://app.asana.com/api/1.0/tasks?projects%5B%5D=836941797XXXXXX&tags%5B%5…&notes=it+does+not+work&followers%5B%5D=myself%40atmysite.com.mx. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://atmysite.com.mx' is therefore not allowed access. The response had HTTP status code 400.

Now, in DevTools, when checking the XHR response from asana, this is what I get:

message: "You should specify one of workspace, project, tag, section"

As you can see from the code, there is a project id defined, but in JS fails and in curl works.

Analyzing why 'projects' in curl works and in ajax fails, the difference is:

curl: projects=83694179XXXXXX
js ajax: projects%5B%5D=836941797XXXXXX ==> projects[]=836941797XXXXXX

What I am doing wrong?

Answer 1

Here is an example of an Ajax request that creates an Asana task:

$.ajax({
  beforeSend: function (xhr) { 
    xhr.setRequestHeader("Authorization", "Bearer " + "0/0123..."); 
  }, 
  url: "https://app.asana.com/api/1.0/tasks", 
  method: 'POST',
  data: {projects:123456789, name: "ajax created task"},
});

It's uncertain how much of your compiled Ajax code is wrong. You definitely need to use a POST request to create a new task. The data values should not be in arrays. You likely don't need to list contentType, as the default will work. You should be able to get your code in working order based on my example.

You should also be aware that by using Ajax, you're exposing your Personal Access Token in the client. If you see anything suspicious on your account, you may want to delete that PAT.