Making cross-origin, browser-side API requests

Hi!

I'm facing an issue with Ticket Imports.

Cors policy states that when a resource is protected by any kind of authentication mechanism (http basic, token...) Access-Control-Allow-Credentials cannot be '*' (everywhere).

I'm trying to implement an application which makes use of Ticket Imports and I cannot use it.

Is there something I can do? I believe the AJAX call is being performed correctly, but the answer isn't well (the ticket gets created but I receive that error).

My code snipet:

var request = new XMLHttpRequest();
request.withCredentials = true;
var url = "https://***.zendesk.com/api/v2/imports/tickets.json";
request.open('POST', url, true);

request.setRequestHeader("Authorization", "Basic *****");

request.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    // do something
  }else{
    // do something else
  }
};
request.send(jsonObjStr);

Hi Jon,

Zendesk only implements CORS for API requests authenticated with OAuth access tokens, not basic authentication. Example:

request.setRequestHeader("Authorization", "Bearer " + access_token);

See the article above for all the details of getting and using an OAuth access token.

Hi

I want to use API with localhost, so I've made OAUTH with http://127.0.0.1:8080/zoauth/ticket_details.html

However, it keeps giving me 'invalid_token'. The only thing I changed from your demo code is putting my OAUTH token in makeRequest() manually like 'makeRequest(oauth, ticket_number)'.

But it keeps giving me 401 unauthorized.

Hello Vivace,

The token should be specified in the "request.setRequestHeader",please try the below

  request.setRequestHeader("Authorization", "Bearer " + token);

If I want to make a app that creates and reads tickets for unauthenticated end-users, who would I set up authentication with the Zendesk API? Or end-user do not have a Zendesk-account.

Hi Dirk,

If you're looking to have end users create (which does not require authentication) and read their associated tickets (which does require authentication) then you should check out the /api/v2/requests.json API endpoint. It's the API that end users should use (versus the /api/v2/tickets.json endpoint, which is for agents).

This also might be a useful article:

Building a custom ticket form with the Zendesk API

Glad you got things going Willie. Just to point out and for reference, grabbing an OAuth token from the location you mentioned is a quick way to generate one for Zendesk Support but will not work for other Zendesk products (such as Chat). This article also has some good tips for generating OAuth tokens for Zendesk Support: Using OAuth authentication with your application

I'm getting some very strange behavior when attempting to make a call to an API endpoint from within a custom ticket sidebar app. Any help would be appreciated! 

client.get('ticket.requester.id').then( requestID => {
var requester_tickets_url = "https://crunchyroll.zendesk.com/api/v2/users/" + requestID['ticket.requester.id'] + "/tickets/requested.json";
console.log(requester_tickets_url);

var r = new XMLHttpRequest();
r.open("GET", requester_tickets_url, true);
r.setRequestHeader('Authorization', 'Bearer ' + oauth_token)
r.send();
r.onreadystatechange=(e)=>{
console.log(r.responseText)
}

});

The console returns the following error:

 Access to XMLHttpRequest at 'https://crunchyroll.zendesk.com/api/v2/users/1380055993/tickets/requested.json' from origin 'https://162861.apps.zdusercontent.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Additionally, per the instructions, what should I put as the "redirect_url" when the app is being run from the ticket sidebar? 

Thanks!

------------------ 

Update: Issue is Resolved. Seems like using an Oauth key from the following locaiton did the trick: https://developer.zendesk.com/requests/new rather than Admin > Channels > API > Oauth

Hi,

Don't know if this is the right thread but i'm having trouble using cors from a ticket side bar application.

The application itself doesn't call any ticket api's instead i only want to do an external api call from a "browser context" instead of the Zendesk server origin.

So when not using cors (cors=false), the api call works fine except that the origin is from a Zendesk server that can have a lot of different ip's making it hard to allow for firewall blocking.

Instead i want it to be "browser initiated" api call with a known browser ip managed by the firewall but i can't make it work :-(

I receive the following error when cors is enabled (true):

Access to XMLHttpRequest at 'https://********.lindex.com/token' from origin  https://lindex********.zendesk.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I was just chatting with my colleague about this and he mentioned that this is actually a restriction on the remote server @ lindex.com preventing CORS calls. The reason that this was working with cors:false is because you’re utilizing our proxy to make these requests and thus CORS doesn’t come into play.

The solution here would be either for the remote server to return the ‘Access-Control-Allow-Origin’ header or to utilize our proxy by passing in cors: false.