CORS error with ajax request

Question

i'm doing this request in ajax but i still have this following error about CORS: XMLHttpRequest cannot load https://cubber.zendesk.com/api/v2/organizations/37520251/users.json. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response. Can you help me pls ( i have seen many topic and i still don't understand why it is not working

 function afficheorga(a){
      $.ajax({
          url: "https://cubber.zendesk.com/api/v2/users/"+a+"/organizations.json",
          type: 'GET',
          dataType: 'json',
          cors: true ,
          contentType:'application/json',
          secure: true,
                    headers: {
                        'Access-Control-Allow-Origin': '*',
                    },
          beforeSend: function (xhr) {
              xhr.setRequestHeader ("Authorization", "Basic " + btoa(""));
          },
          success: function (data){
            console.log(data.organizations[0].name);
            var organisation = data.organizations[0].name;
            $("#company").text(organisation);
          }
        })
    }

The server does not appear to support CORS. The "Access-Control-Allow-Origin" header is missing from the server response. You are also triggering a preflight request by adding custom headers. — Yogi, Apr 12 '16 at 10:03
The Zen Desk API says: "CORS requests are supported only for endpoints such as Help Center Search that don't require authentication. CORS requests are not supported for any endpoint that requires authentication." See: [Core API - Introduction](https://developer.zendesk.com/rest_api/docs/core/introduction) — Yogi, Apr 12 '16 at 10:24

Paul Fitzgerald · Accepted Answer · 2020-05-06T10:42:06.530

9

You could get around this by using jsonp. Change dataType to jsonp so your GET request should be as follows

function afficheorga(a){
      $.ajax({
          url: "https://cubber.zendesk.com/api/v2/users/"+a+"/organizations.json",
          type: 'GET',
          dataType: 'jsonp',
          cors: true ,
          contentType:'application/json',
          secure: true,
          headers: {
            'Access-Control-Allow-Origin': '*',
          },
          beforeSend: function (xhr) {
            xhr.setRequestHeader ("Authorization", "Basic " + btoa(""));
          },
          success: function (data){
            console.log(data.organizations[0].name);
            var organisation = data.organizations[0].name;
            $("#company").text(organisation);
          }
      })
}

edited May 06 '20 at 10:42

answered Apr 12 '16 at 09:23

Paul Fitzgerald

11,770
4
42
54

5

Well this delete my error about cross origin but my API for the request didn t accept "jsonp" so i can't use it – xenurs Apr 12 '16 at 09:52
4

the datatype "jsonp" it gives a 401 not authorized error even after giving proper authentication. any way around this? – indianLeo Apr 29 '20 at 15:26

CORS error with ajax request

1 Answers1

Linked