Cross-Origin Resource Sharing (CORS) is a mechanism to allow URLs (or origins) different from your own to make requests to your server. Below, we'll explore exactly what CORS is, and then help you understand how to set it up for Mutiny.

Same-origin policy

CORS stems from a security policy in your browser called same-origin policy. This policy makes it so only requests from your site's URL (or origin) can make requests to your server. The goal here is to ensure that a malicious website can't make a request to your server, which could compromise sensitive information. For example, if a Javascript snippet using the URL malicious-website.com tried to make a request to yoursite.com, the same-origin policy would block this because the origin is not the same.

In the case of Mutiny, when we load a preview of an experience or show a page in the editor, we load the page using the origin of https://peek-achoo.com. If we try to make requests to your server, we may get blocked because of the same-origin policy.

Cross-origin resource sharing

Of course, there may be situations when you want to allow a different domain to request information from your servers. In order to relax the restrictions of the same-origin policy, you can use a CORS policy. The CORS policy is set so when the response comes back from the server, there will be a note that essentially says "this site isn't the same origin as my server, but we trust it, so you can allow the request to go through". That way, the browser won't block it.

CORS and Mutiny

How to know if you’re running into CORS issues

If you’re having trouble previewing your experience you can check your browser console to see if CORS issues are at play. Right-click the page and click “Inspect > Console” and look for an error that looks similar to this:

Solution

In order for Mutiny to work properly, you need to be sure that your CORS policy allows requests from Mutiny origins. To do this, ensure that when Mutiny makes a request from the following domain, an Access-Control-Allow-Origin header is added to the response allowing that specific domain. Note the spelling difference between these domains.

• https://peek-achoo.com
• https://peak-achoo.com

For example, the header response for a request from https://peek-achoo.com should look like this:

Access-Control-Allow-Origin: <https://peek-achoo.com>