Making cross-origin, browser-side API requests

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.