向ajax发出发布请求

Question

Trying to get the Zendesk API to work

curl https://{subdomain}.zendesk.com/api/v2/tickets.json \
  -d '{"ticket":{"subject":"My printer is on fire!", "comment": { "body": "The smoke is very colorful." }}}' \
  -H "Content-Type: application/json" -v -u {email_address}:{password} -X POST

Works fine, when I convert it to ajax:

var http = "https://SSS.zendesk.com/api/v2/tickets.json";
var data = {"ticket":{"subject":"My printer is on fire!", "comment": { "body": "The smoke is very colorful." }}};


$.ajax({
    url: http,
    beforeSend: function(xhr) { 
      xhr.setRequestHeader("Authorization", "Basic " + btoa("user:pass")); 
    },
    type: 'POST',
    dataType: 'json',
    contentType: 'application/json',
    processData: false,
    data: data,
    success: function (data) {
      console.log(JSON.stringify(data));
    },
    error: function(){
      console.log("Cannot get data");
    }
});

I get error:

XMLHttpRequest cannot load https://quran.zendesk.com/api/v2/tickets.json. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://null.jsbin.com' is therefore not allowed access. The response had HTTP status code 422.

How can I fix this?

Answer 1

You are falling foul of the Same Origin Policy.

You cannot make AJAX requests in jQuery to third party domains unless using JSONP or CORS (where they are supported - check their documentation for information).

If the URL you are trying to retrieve data from does not support either of those you would need to make a request via your local server, and retrieve the response from that via JS.