Making cross-origin, browser-side API requests

Have more questions? Submit a request

13 Comments

  • Jon I.
    Comment actions Permalink

    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);
    0
  • Charles Nadeau
    Comment actions Permalink

    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.

     

    0
  • Vivace Cho
    Comment actions Permalink

    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.


     

    0
  • Klara Audren
    Comment actions Permalink

    Hello Vivace,

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

      request.setRequestHeader("Authorization", "Bearer " + token);
    0
  • Dirk Wolthuis
    Comment actions Permalink

    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.

    0
  • Bryan - Community Manager
    Comment actions Permalink

    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

    -1
  • Willie
    Comment actions Permalink

    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

    0
  • Bryan - Community Manager
    Comment actions Permalink

    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

    0
  • Mikael Hedlund
    Comment actions Permalink

    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.

    0
  • Greg - Community Manager
    Comment actions Permalink

    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.

    0
  • Mikael Hedlund
    Comment actions Permalink

    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

    0
  • Shweta
    Comment actions Permalink

    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.

    0
  • Anna Roussanova
    Comment actions Permalink

    Hi Shweta, as the article mentions, we only have CORS implemented for API requests authenticated with OAuth access tokens, so if you need to make a CORS request to Zendesk you would have to use OAuth.

     

    0

Please sign in to leave a comment.

Powered by Zendesk