OAuth 2.0 origin_mismatch error when setting up Google Drive API integration

Other Questions Google drive
1

I’m trying to set up Google Drive API for my web application but keep running into an OAuth authentication issue. I followed the official quickstart guide and created an HTML file called drive_auth.html in my website’s root folder. Here’s the basic structure I’m using:

<!DOCTYPE html>
<html>
<head>
    <script src="https://apis.google.com/js/api.js"></script>
</head>
<body>
    <button id="auth-button" onclick="handleAuth()">Connect to Drive</button>
    <script>
        const CLIENT_ID = 'my-actual-client-id-here';
        
        function handleAuth() {
            gapi.load('auth2', function() {
                gapi.auth2.init({client_id: CLIENT_ID});
            });
        }
    </script>
</body>
</html>

In my Google Cloud Console, I’ve configured the authorized JavaScript origins to point to my main domain. However, when I navigate to the HTML file and try to authenticate, I get an origin_mismatch error from Google’s OAuth system. The error appears right after clicking the authorization button. What could be causing this mismatch between my configured origins and the actual request origin?

2

dont open drive_auth.html directly from your computer - thats the issue! google’s oauth needs a proper web server, not just opening files locally. set up a local server even for testing and you’ll avoid the origin_mismatch error.