A cross-origin resource sharing (CORS) request is when a browser-based application, such as a Zendesk Apps framework (ZAF) app, attempts to make a cross-origin call to retrieve a shared resource from an external web service.

A CORS request requires certain conditions to work. One condition is that the external service needs to return the HTTP header Access-Control-Allow-Origin in the response. If the external service doesn't return this header, the system stops the request and displays an error message.

Use this guide to resolve common issues related to the Access-Control-Allow-Origin error message. Below are example error messages:

  • Failed to load ... No 'Access-Control-Allow-Origin' header
  • Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource ... Reason: CORS header 'Access-Control-Allow-Origin' missing
  • Failed to load ... Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header present on the requested resource. Origin ... is therefore not allowed access

This article contains the topics below:

  • Troubleshooting questions
  • Resolution steps
  • Alternatives to CORS

Troubleshooting questions

Before you troubleshoot the error, take note of the questions below and identify specific parameters that can help you address the issue:

  1. What's the starting point URL of the call or the origin? What's the external service URL? These are sometimes detailed in the error message.
  2. What do you retrieve and what do you use it for? Do you retrieve a PNG file, a script, CSS, or a font file? This provides an insight into the use case and why the external resource is important.
  3. What's the browser used and its version? Despite the CORS specification standard, the error messages that browsers return can be different.
  4. Does this external resource require authentication? If a redirect is required, the Access-Control-Allow-Origin header may not be returned, and the call fails. Access the resource URL in incognito mode or private browsing to test if it's accessible under general circumstances.
  5. Can you see the OPTIONS HTTP method call in the browser's network settings? When there are custom requests, the browser can make a preflight HTTP call in the CORS request, which requires certain values. If the OPTIONS call fails, the CORS error appears.
  6. Do you see the HTTP status code 302 before the OPTIONS call? This indicates a temporary redirect, which may cause the OPTIONS call to fail and then trigger a CORS error.
  7. Generate a HAR file. Get a snapshot of the failed call to help understand and debug the issue.

Resolution steps

Below are possible solutions and workarounds to fix the error message:

  • If you own the external server, modify it to return the Access-Control-Allow-Origin header. If the external server isn't controlled in-house, coordinate with the server owner.
  • If the app is written with the Zendesk Apps framework, a backend proxy server is available through the client.request() call. Use the default value cors:false in the settings to make requests to the proxy server. Because the proxy service is in the backend, it doesn't need to adhere to the CORS specification standard. However, this isn't always a solution. One limitation is that the proxy service doesn't support the retrieval of binary information from external services.

Sometimes there's no fix. There are external resources that aren't meant to be shared with a browser-based web app.

Alternatives to CORS

To avoid CORS-related errors in the future, implement these alternatives:

  • If you use a Zendesk Apps framework app, use the proxy server. Instead of direct fetch() or AJAX, use the client.request() call which proxies requests through Zendesk.
  • Use the Web Widget SDK to embed live chat, messaging, ticketing, talk, and help center into your web app. The SDK handles authentication and CORS automatically.
  • Make API calls from your backend server instead. A CORS request can error when it calls the Zendesk API directly from a browser. Server-to-server requests don't have CORS restrictions, while browser-based requests do.
  • Instead of a CORS request, embed the external resource to avoid any cross-origin call. This solution may not work if you don't have the external resource's URL, it's too large to fit as a local resource, the data changes too often to download it as a local static resource, or it's not possible to embed the external resource.
Powered by Zendesk