const submitComment = async () => {
try {
const data: any = { request: { comment: { body: "This is my new comment on my ticket" } };
const authHeaders = {
'Content-Type': 'application/json',
'Authorization': process.env.ZENDESK_OAUTH_API_KEY,
'X-On-Behalf-Of': user.email
};
//https://{DOMAIN}.zendesk.com/api/v2/requests/:requestId
const response = await axios.put(`${ZENDESK_API}/requests/${params.id}`, data, { headers: authHeaders });
console.log(response);
} catch (error) {
console.log(error);
}
}I used this documentation to generate an access token to be used to call the Zendesk API:
Using the 'X-On-Behalf-Of' works just fine with POSTMAN but in my web app I am getting CORS error:
Access to XMLHttpRequest at 'https://{DOMAIN}.zendesk.com/api/v2/requests/460105' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field x-on-behalf-of is not allowed by Access-Control-Allow-Headers in preflight response.I was wondering if there is some configuration in Zendesk I am missing to allow for CORS. From my understanding the access token generated should support CORS but I do believe the documentation also states that any errors related to the API call could throw CORS errors. Removing the 'X-On-Behalf-Of' of course gives me a 200 response but I was hoping to get this to work with using the 'X-On-Behalf-Of'.
Maybe there are other solutions to this problem without supplying the end user name and password into basic auth to update the request with a comment. Most of our users do not verify their email and mostly only update requests through email.
Thanks,
Zach
I'd like to see whether this is related to the local test of your web app. Does your dev environment have a hosted version of the app to test sending the request from?