• Jon I.

  • 2021년 03월 26일 21:00

  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);

• Charles Nadeau

  • 2021년 03월 26일 21:00

  Zendesk Documentation Team

  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.

   

• Vivace Cho

  • 2021년 03월 26일 21:00

  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.

  
  

   

• Klara Audren

  • 2021년 03월 26일 21:00

  Hello Vivace,

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

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

• Dirk Wolthuis

  • 2021년 03월 26일 21:00

  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.

• Bryan Flynn

  • 2021년 03월 26일 21:00

  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

• Willie

  • 2021년 03월 26일 21:00

  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

• Bryan Flynn

  • 2021년 03월 26일 21:00

  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

• Mikael Hedlund

  • 2021년 03월 26일 21:00

  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.

• Mikael Hedlund

  • 2021년 03월 26일 21:00

  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

• Greg Katechis

  • 2021년 03월 26일 21:00

  Zendesk Developer Advocacy

  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.

• Shweta

  • 2021년 03월 26일 21:00

  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.

• Anna Roussanova

  • 2021년 03월 26일 21:00

  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.

   

• Jon Simone

  • 2021년 07월 19일 23:26

  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));

• Chinh Phan

  • 2021년 09월 13일 08:45

  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.

댓글을 남기려면 로그인하세요.