Discussion about CORS errors when making HTTP/HTTPS requests in a Sanity.io app.
18 repliesLast 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?
user U https://khv63f.csb.app
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.
Was this answer helpful?
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.
