Discussion about CORS errors when making HTTP/HTTPS requests in a Sanity.io app.

18 replies
Last updated: Dec 30, 2022
Hi, please do anyone know what to do with the CORS ? I'm going through the fundamental of the app, the getting started project on code sandbox won't allow Http/Https request due to CORS even after I added the url to the CORS on Sanity which was successfully added. I also try to make a request from a Astro app same CORS problem. Anyone know a way around this?
Dec 30, 2022, 4:25 PM
Did you check for credentials?
Dec 30, 2022, 5:34 PM
At first I didn't and later I did but still can't make a request or fetch the data. I tried with the getting started project and another one on my machine
Dec 30, 2022, 5:38 PM
user H
Can you please provide a few more details about your setup, including samples of errors you’re getting, what you’re adding to CORS origins, etc.?
Dec 30, 2022, 5:50 PM
<!DOCTYPE html>
    &lt;title&gt;My Pets&lt;/title&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;link rel="stylesheet" href="src/styles.css" /&gt;

      &lt;h1&gt;Sanity + Vanilla JavaScript&lt;/h1&gt;
        &lt;li&gt;Loading pets…&lt;/li&gt;

Your data will show up here when you've configured everything correctly
      let DATASET = "production";
      let PROJECTID = "zk1lyy0l";
      let QUERY = encodeURIComponent("*[_type == 'pet'");
      let url = `https://${PROJECTID}.<http://api.sanity.io/v2021-10-21/data/query/${DATASET}?query=${QUERY}`;|api.sanity.io/v2021-10-21/data/query/${DATASET}?query=${QUERY}`;>
        .then((res) =&gt; res.json())
        .then(({ result }) =&gt; {
          let petList = document.querySelector("ul");
          let firstItem = petList.querySelector("li");
          if (result.length &gt; 0) {
            result.forEach((pet) =&gt; {
                (document.createElement("li").textContent = pet?.name)
            let pre = (document.querySelector(
            ).textContent = JSON.stringify(result, null, 2));
        .catch((err) =&gt; console.error(err));
Dec 30, 2022, 5:53 PM
You said you are using sandbox, can you send the link?
Dec 30, 2022, 5:54 PM
Dec 30, 2022, 5:54 PM
user A
I sent the link to the sandbox for the getting started project
Dec 30, 2022, 5:55 PM
And what did you add CORS for?
Dec 30, 2022, 5:55 PM
Dec 30, 2022, 5:56 PM
The preview URL
Dec 30, 2022, 5:56 PM
user U
As instructed in the getting started tutorial. I even spin up a project on my local development machine and added the loop back local host, same issue arrises with CORS
Dec 30, 2022, 5:58 PM
This is the error I'm getting: Access to fetch at '<https://vortex.data.microsoft.com/collect/v1>' from origin '<https://codesandbox.io>' has been blocked by CORS policy: Request header field content-encoding is not allowed by Access-Control-Allow-Headers in preflight response.
Dec 30, 2022, 6:00 PM
That’s not fetching from Sanity, so you’d need to look at your CORS settings from whatever https://vortex.data.microsoft.com is.
Dec 30, 2022, 6:08 PM
user A
That's the sandbox , it's the user agent it's own by microsof which is the origin of the request
Dec 30, 2022, 6:10 PM
<http://zk1lyy0l.api.sanity.io/v2021-10-21/data/query/production?query=*%5B_type%20%3D%3D%20%27pet%27:1|zk1lyy0l.api.sanity.io/v2021-10-21/data/query/production?query=*%5B_type%20%3D%3D%20%27pet%27:1> Failed to load resource: the server responded with a status of 400 ()
Dec 30, 2022, 6:13 PM
user A

<http://zk1lyy0l.api.sanity.io/v2021-10-21/data/query/production?query=*%5B_type%20%3D%3D%20%27pet%27:1|zk1lyy0l.api.sanity.io/v2021-10-21/data/query/production?query=*%5B_type%20%3D%3D%20%27pet%27:1> Failed to load resource: the server responded with a status of 400 ()
Dec 30, 2022, 6:14 PM
Those aren’t CORS errors. You’re getting 400 errors because the query is not formed correctly (there’s a missing
at the end).
Dec 30, 2022, 6:16 PM
user A
Good eyes, thank you. Hard to see bugs because the stack trace was not alluding to syntax.
Dec 30, 2022, 6:28 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?

Categorized in