How are CORS errors resolved?

You are likely experiencing a consequence of the same-origin policy enforced by the XMLHttpRequest API (a core Web API for making http requests). The XMLHttpRequest requires any browser that is attempting to make a request from one origin (in this case, your localhost) to a server located at another location (in this case, www.leaflink.com) to follow a strict set of procedures. This mitigates serious security vulnerabilities that could be exposed through Cross Origin Resource Sharing (CORS).

More on XMLHttpRequest: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequestopen in new window

More on CORS: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORSopen in new window & https://www.codecademy.com/articles/what-is-corsopen in new window

More on same-origin policy: https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policyopen in new window

However, we do not support cross-origin resource sharing in this manner. It is generally best practice to decouple a frontend from a third-party API.

In order to retrieve this data for your website, you can spin up a simple web server on the same domain to make these requests. While browser requests cannot be made cross origin, server requests can.

Once you have the server set up, your client-side code should communicate directly with your web server while your web server communicates directly with the LeafLink API.

There are a variety of ways to set this up and the option you choose depends largely on your tech stack and architectural preferences.

Last Updated: