Can't get response from Zendesk ticket API with JavaScript fetch

Question

I'm trying to create an HTML form which creates a ticket in Zendesk. The form will also include a file upload. Right now I'm able to create the ticket with the API, but I can't get the response from the API call. I need the response to get the ticket id from the created ticket. I can use this id the attach the uploaded file to the ticket. But like I said, I can't retrieve the response.

Code:

function createTicket() {      
    var id;
    var easyWalker = $("#choose_product option:selected").html();
    var batchNumber = document.getElementById("batch_number").value;
    var color = document.getElementById("color").value;
    var firstName = document.getElementById("first_name").value;
    var lastName = document.getElementById("last_name").value;
    var email = document.getElementById("email").value;
    var phone = document.getElementById("phone").value;
  
    console.log("creating ticket");

    var myHeaders = new Headers();
    myHeaders.append("Content-Type", "application/json");
    myHeaders.append("Authorization", "Basic " + auth);
    myHeaders.append("Cookie", "__cfruid=f6f220be875e5825ba2ea5650a7a58d04ceb1299-1695207433; _zendesk_cookie=BAhJIhl7ImRldmljZV90b2tlbnMiOnt9fQY6BkVU--0bf2100788cb010d0183feca16aaf88ccaf719ca");
    
    var raw = JSON.stringify({
            "ticket": {
                "subject": "New Easywalker Warranty Registry from " + firstName + " " + lastName,
                "description": 
                  "Product: " + easyWalker + "\n" +
                  "Batch Number: " + batchNumber + "\n" +
                  "Color: " + color + "\n" +
                  "Name: " + firstName + " " + lastName + "\n" +
                  "Email: " + email + "\n" +
                  "Phone Number: " + phone,
                "requester": {
                  "name": firstName + " " + lastName,
                  "email": email
                }
            }
        });
    
    var requestOptions = {
      method: 'POST',
      headers: myHeaders,
      body: raw,
      redirect: 'follow'
    };
    
    fetch("https://easywalkersupport.zendesk.com/api/v2/tickets", requestOptions)
      .then(response => id = response)
      .then(result => console.log(result))
      .catch(error => console.log('error', error));

    return id;
}

I know that response isn't the id, but I don't know what property I need to access to do so, because I can't see the result. Previously I used console.log(result) but nothing was displayed in the console.

Currently I'm getting this error in the console: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://easywalkersupport.zendesk.com/api/v2/tickets. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 201., although the ticket is created in Zendesk.

Could someone help me with a solution and an example of an implementation of the given solution?

Thanks in advance!

Ivan

Answer 1

You are using the endpoint /api/v2/tickets, which is intendend for agents and admins. See: Tickets vs Requests

For creating a custom HTML I would recommend that you use the endpoint /api/v2/requests, which is intended to be used by end-users. See: Create Request

As a final recommendation, what I usually do on projects that need a custom HTML form, it to have a middleware server between the website and the Zendesk API. Zendesk have this tutorial explaining how to make this work using Node.js or Python. Custom Ticket Form Web App