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.

score 0 · Accepted Answer · answered Oct 02 '18 at 21:45

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!

score 0 · Answer 2 · 2018-10-02T21:52:45.990

0

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.

edited Oct 02 '18 at 21:52

answered Oct 02 '18 at 21:47

3

The request is coming from Zendesk where he has no access to! – Tarek N. Elsamni Oct 02 '18 at 21:50
@TarekN.Elsamni thanks for the notice, I checked there documentation and I edited my answer! – Oct 02 '18 at 21:53
Yes, it’s exactly what I mentioned in my answer but good that you included it here so we don’t lose it if the zendesk page dies. +1 – Tarek N. Elsamni Oct 02 '18 at 21:54

Zendesk API + Angular: Cannot receive data due to CORS

2 Answers2