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.

Hi Greg,

Finally got it working by disabling cors to obtain the token and then activating cors for the "data call" itself.

Thanks for your quick response and commitment :-)

/Mikael

Is there any way I can bypass the Authorization grant flow or implicit grant flow as I do not want our users to get redirected grant Access page? FYI, we've SAML enabled in our application.

I am getting a CORS policy error when I am making a Basic API request (not OAuth). Any ideas?

Here is the error:

Access to fetch at 'https://******.zendesk.com/api/sunshine/objects/records?ids=3a96ea2d-cec5-11eb-9895-2ff8f5677382' from origin 'https://cdpn.io' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Here is the code:

var myHeaders = new Headers();

myHeaders.append("Accept", "application/json");

myHeaders.append("Content-Type", "application/json");

myHeaders.append("Authorization", "Basic ***********");

myHeaders.append("Cookie", "__cfruid=************");

var requestOptions = {

method: 'GET',

headers: myHeaders,

redirect: 'follow'

};

fetch("https://******.zendesk.com/api/sunshine/objects/records?ids=3a96ea2d-cec5-11eb-9895-2ff8f5677382\n", requestOptions)

.then(response => response.text())

.then(result => console.log(result))

.catch(error => console.log('error', error));

It seems there is just only way to create a ticket form and implement from Frontend via Javascript is:
Get token access, on document: https://developer.zendesk.com/documentation/ticketing/using-the-zendesk-api/making-cross-origin-browser-side-api-requests/

in function:

function init() {

// reset page

document.getElementById('error-msg').style.display="none";

document.getElementById('details').style.display="none";

varurl=window.location.href;

if (url.indexOf('http://localhost:8080/contact.html') !==-1) {

if (url.indexOf('access_token=') !==-1) {

varaccess_token=readUrlParam(url, 'access_token');

localStorage.setItem('zauth', access_token);

varticket_id=localStorage.getItem('ticket_id');

document.getElementById('ticket-id').value =ticket_id;

window.location.hash="";

makeRequest(access_token, ticket_id);

}

if (url.indexOf('error=') !==-1) {

varerror_desc=readUrlParam(url, 'error_description');

varmsg='Authorization error:'+error_desc;

showError(msg);

}

}

}

 

function startAuthFlow() {

var endpoint = 'https://***.com/oauth/authorizations/new';

var url_params = '?' +

'response_type=token' + '&' +

'redirect_uri=http://localhost:8080/contact.html' + '&' +

'client_id=dfodevtest' + '&' +

'scope=' + encodeURIComponent('read write');

window.location = endpoint + url_params;

}

After that, we have access token in localstorage, named: zauth, example define variable is: zauthValue

Then when we create a POST request, the Authorization should be: Bearer + zauthValue

But this way will redirect user to the authorizations/new... page.