OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How do I deal with the "No 'Access-Control-Allow-Origin' header is present" with AppWrite and OAuth 2.0

  • Thread starter Thread starter War Tinder
  • Start date Start date
W

War Tinder

Guest
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:

Code:
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:

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.

<p>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:</p>
<pre><code>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.
</code></pre>
<p>This is the code:</p>
<pre><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>
</code></pre>
<p>The styling is all just a demo so I can actually get it to work.</p>
<p>How do I deal with this issue? This is just very basic Google login stuff and it doesn't need much information at all.</p>
 

Latest posts

Top