CORS - Cross-Origin Resource Sharing - HL Vanilla Community
<main> <article class="userContent"> <p><strong>Cross-origin resource sharing (CORS)</strong> allows pages on other domains to access the API. To use CORS, you’ll have to specifically <strong>allowlist </strong>each domain you want to grant access; this ensures that no bad actors are calling your API from sites you don’t control.</p><h2 data-id="allowlist-domains-for-cors">Allowlist domains for CORS</h2><p>Perform the following steps to allowlist a domain and grant it access to the API:</p><ol><li>Access the Dashboard.</li><li>Navigate to <strong>Settings > Security</strong>.</li><li>Add the domain you want to allowlist to the <strong>Trusted Domains</strong> list. Just enter the domain without the <strong>https://</strong> part.</li></ol><h2 data-id="make-a-cors-request">Make a CORS request</h2><p>Most JavaScript AJAX clients support CORS transparently so you won't have to do anything once the site has allowlisted your domain. </p><p>If you're unsure whether your client is making the request properly, open up your network inspector and make sure the request has the <strong>Origin</strong> header and that it includes your domain. That is the domain that must be allowlisted in Vanilla.</p><h2 data-id="avoid-pre-flighted-requests">Avoid pre-flighted requests</h2><p>CORS leverages the concept of “pre-flighted requests.” This involves the browser making an <em>initial request</em> to see if it has authorization, followed by the <em>actual request</em> if everything checks out. Pre-flighted requests are suboptimal because they essentially double up the requests you have to make.</p><p>Fortunately, the API has a workaround to avoid most pre-flighted requests. Here are the steps you need to take:</p><ol><li>Pass the access token in the <strong>access_token</strong> querystring rather than the authorization header. If you do this, leave out the “Bearer” part of the access token.</li><li>GET requests that contain the access token in the querystring should avoid pre-flight requests.</li><li>When you make a POST request you cannot set the content type to <code class="code codeInline" spellcheck="false" tabindex="0">application/json</code> or else it will trigger a pre-flight request. If you want to post JSON, you can set your content type to text/plain and the API will assume it’s <code class="code codeInline" spellcheck="false" tabindex="0">application/json</code>.</li><li>If you're still noticing pre-flight requests, you may be adding some type of header to your request. Look at <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests" rel="nofollow noreferrer ugc">MDN’s help on simple requests</a> to see what extraneous header may be triggering the pre-flight.</li></ol><p>These workarounds are only necessary if you're making requests within a browser. If you're making requests elsewhere, then you should set the access token in the header and use a content type of <code class="code codeInline" spellcheck="false" tabindex="0">application/json</code>.</p> </article> </main>