I am working with AppWrite and setting up Google login. I am working with AppWrite and pure HTML, CSS, and JS. I am not using any framework or anything like NodeJS. I keep getting the following error:
Access to fetch at 'MY-APPWRITE-URI' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
This is the code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Google Sign-In</title>
<script src="https://accounts.google.com/gsi/client" async defer></script>
</head>
<body>
<h1>Sign In with Google</h1>
<div id="g_id_onload"
data-client_id="MY-CLIENT-ID.apps.googleusercontent.com"
data-context="signin"
data-ux_mode="popup"
data-callback="handleCredentialResponse"
data-auto_prompt="false">
</div>
<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="outline"
data-text="sign_in_with"
data-size="large"
data-logo_alignment="left">
</div>
<script>
function handleCredentialResponse(response) {
const id_token = response.credential;
fetch('MY-APPRWRITE-URI', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Origin': '*' // Explicitly set the Origin header
},
body: JSON.stringify({
credential: response.credential
}),
redirect: 'follow' // Ensure redirects are followed
})
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
console.log(data);
})
.catch(error => {
console.error('Error:', error);
});
}
</script>
</body>
</html>
The styling is all just a demo so I can actually get it to work.
How do I deal with this issue? This is just very basic Google login stuff and it doesn’t need much information at all.