Zendesk API + Angular: Cannot receive data due to CORS

Question

I am using the Zendesk API and am able to make post requests (even though the response tells me there is an error) but I cannot make GET requests using my Angular 4 app and HttpClient.

searchZendesk( query : string ) {
    console.log(query)

    this.search( query ).subscribe(
      (data) => console.log(data),
      (err) => console.log(err.error),
      () => console.log("complete")
    )
}

search( query : string ) {
    let headers = this.setOptions()
    let url = `${ this.baseUrl }/search.json?query=${ query }`

    return this.http.get(`${ this.baseUrl }/search.json?query=${ query }`, { headers: headers })
  }

setOptions() {
    let key = this.setKey()
    let headers = new HttpHeaders({
      'Authorization': key,
    })

    return headers
}

After calling searchZendesk() I receive the following error:

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

Answer 1

You need to host your Zendesk and your angular code on the same domain to avoid the CORS issue.

You have full control on how to deploy your js code (angular app) so I’leave this for you.

To host zendesk on the same domain follow this article to do it:

https://support.zendesk.com/hc/en-us/articles/203664356-Changing-the-address-of-your-Help-Center-subdomain-host-mapping-

——

Also, following this article https://develop.zendesk.com/hc/en-us/articles/360001074268-Making-cross-origin-browser-side-API-requests you should be able to access most of the APIs from client side without CORS issues if you used oAuth authentication!

Answer 2

If an API request is authenticated with OAuth :

Zendesk includes a special "Access-Control-Allow-Origin" CORS header in the response. The header has a value of '*', which allows requests from a page in any origin. The header basically gives the browser permission to access resources in the Zendesk domain.