Why do I get a CORS error : “No ‘Access-Control-Allow-Origin’ header is present on the requested resource”?

If you try to pass an access_token (either personal or generated from an authorization exchange) from a browser XMLHttp request for example you will receive an error:

No 'Access-Control-Allow-Origin' header is present on the requested resource

or

The 'Access-Control-Allow-Origin' header has a value that is not equal to the supplied origin

Cross-origin resource sharing (CORS) is a mechanism that allows restricted resources (e.g. fonts) on a web page to be requested from another domain outside the domain from which the resource originated.

API users #

We’ve deliberately not enabled CORS because it would enable/encourage an access_token and refresh_token to be passed to the browser where they could be much more easily compromised.

For example, someone uses the capability to write a WordPress plugin for a blog which entails sending the access and refresh token to the browser. That works, people install it, now anyone can view source on that site and have at least some level of read access to that person’s calendars.

In order to resolve this you will need a server component that handles the API interactions with Cronofy and then renders the required information to the browser.

UI Elements #

Our UI Elements use a more restricted token locked to a specific set of operations and locations.

If you’re a UI Elements user and are seeing CORS errors in your browser console, you’ll need to check that the Element Token that you’ve generated has been given the correct Origin value.

This might mean parameterizing it so that each of your environments send the appropriate URL that matches how your end-users are accessing it.