Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

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>
<html>
  <head>
    <title>My Pets</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="src/styles.css" />
  </head>

  <body>
    <header>
      <h1>Sanity + Vanilla JavaScript</h1>
    </header>
    <main>
      <h2>Pets</h2>
      <ul>
        <li>Loading pets…</li>
      </ul>

      <div>
        <pre>
¯\_(ツ)_/¯
Your data will show up here when you've configured everything correctly
        </pre>
      </div>
    </main>
    <script>
      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}`;>
      fetch(url)
        .then((res) => res.json())
        .then(({ result }) => {
          console.log(result);
          let petList = document.querySelector("ul");
          let firstItem = petList.querySelector("li");
          if (result.length > 0) {
            petList.removeChild(firstItem);
            result.forEach((pet) => {
              petList.appendChild(
                (document.createElement("li").textContent = pet?.name)
              );
            });
            let pre = (document.querySelector(
              "pre"
            ).textContent = JSON.stringify(result, null, 2));
          }
        })
        .catch((err) => console.error(err));
    </script>
  </body>
</html>
Dec 30, 2022, 5:53 PM
You said you are using sandbox, can you send the link?
Dec 30, 2022, 5:54 PM
<https://codesandbox.io/s/get-started-with-sanity-vanilla-javascript-starter-forked-khv63f?file=/index.html>
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

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Get started for freeExplore the demo

Was this answer helpful?