Get help on Discord

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?
Did you check for credentials?
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
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.?
<!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>
You said you are using sandbox, can you send the link?
<https://codesandbox.io/s/get-started-with-sanity-vanilla-javascript-starter-forked-khv63f?file=/index.html>
user A
I sent the link to the sandbox for the getting started project
And what did you add CORS for?
The preview URL
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
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.
That’s not fetching from Sanity, so you’d need to look at your CORS settings from whatever https://vortex.data.microsoft.com is.
user A
That's the sandbox , it's the user agent it's own by microsof which is the origin of the request
<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 ()
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 ()
Those aren’t CORS errors. You’re getting 400 errors because the query is not formed correctly (there’s a missing 
]
at the end).
user A
Good eyes, thank you. Hard to see bugs because the stack trace was not alluding to syntax.

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?