Google OAuth 在生产中工作，但在开发中显示“origin_mismatch”错误（本地主机）

Question

我正在为我的应用程序设置 Google OAuth 2.0，我遇到了一个问题：在生产中一切正常 (

https://mywebsite.com

)，但在开发中 (

localhost

)，我收到一个 “错误 400：origin_mismatch” “ Google 登录过程中出现错误。

错误信息

Google 登录模式中显示的错误是：

Access blocked: Authorization Error

[email protected]

You can't sign in to this app because it doesn't comply with Google's OAuth 2.0 policy.

If you're the app developer, register the JavaScript origin in the Google Cloud Console.
Error 400: origin_mismatch

设置详情

• 前端：

  localhost:3000

  （反应）
• 后端：

  localhost:8000

  （使用 Node.js 进行 Express）

Google Cloud 控制台配置

我已使用以下内容配置我的 Google Cloud Console：

• 授权的 JavaScript 起源:

  • http://localhost:3000

  • https://mywebsite.com

    （用于生产）

• 授权重定向 URI:

  • http://localhost:8000/api/callback

    （用于开发）

  • https://mywebsite.com/api/callback

    （用于生产）

相关代码

后端 OAuth 路由（

auth.js

文件中的 Express.js）：

const express = require("express");
const router = express.Router();
const oauth2Client = require("../config/googleConfig");
const SCOPES = [
    'https://www.googleapis.com/auth/userinfo.profile',
    'https://www.googleapis.com/auth/userinfo.email'
];

// Redirect to Google's OAuth 2.0 server to initiate authentication
router.get('/google', (req, res) => {
    console.log(`/google called`);
    const authUrl = oauth2Client.generateAuthUrl({
        access_type: 'offline',
        scope: SCOPES,
        redirect_uri: 'http://localhost:8000/api/callback' // Explicitly set redirect URI for development
    });
    res.redirect(authUrl);
});

// Handle the OAuth 2.0 server response
router.get('/callback', async (req, res) => {
    console.log(`/callback req.query: `, req.query);
    const { code } = req.query;
    try {
        const { tokens } = await oauth2Client.getToken(code);
        oauth2Client.setCredentials(tokens);
        req.session.tokens = tokens;
        res.redirect('http://localhost:3000'); // Redirect back to frontend after successful login
    } catch (error) {
        console.error('Error during OAuth callback:', error.response ? error.response.data : error);
        res.status(500).send('Authentication failed');
    }
});

module.exports = router;

CORS配置（

server.js

中的Express中间件）：

// process.env.CLIENT_URL === http://localhost:3000

app.use(cors({ 
  origin: `${process.env.CLIENT_URL}`,
  credentials: true
}));

会话配置（快速

express-session

设置）：

app.use(session({
    secret: process.env.SESSION_SECRET,
    resave: false,
    saveUninitialized: false,
    store: MongoStore.create({ mongoUrl: process.env.DATABASE }),
    cookie: {
        maxAge: 2 * 60 * 60 * 1000, // 2 hours
        httpOnly: true,
        secure: false, // Set to false in development
        sameSite: 'Lax' // Ensures cookies are accessible across localhost:3000 and localhost:8000
    }
}));

现在是用于与后端通信的前端代码。

前端React API调用函数

export const googleSignIn = async (token) => { // not the JWT token, the google token
  try {
      const response = await fetch(`${API}/google-login`, {
          method: 'POST',
          headers: {
              Accept: 'application/json',
              'Content-Type': 'application/json',
          },
          credentials: 'include', // Ensure session cookie is included
          body: JSON.stringify({ idToken: token }),
      });
      return await response.json();
  } catch (err) {
      return { error: 'Google sign-in failed. Please try again.' };
  }
};

我尝试过的事情

1. 验证授权的 JavaScript 来源和重定向 URI：在 Google Cloud Console 中仔细检查将

   http://localhost:3000

   设置为授权 JavaScript 来源，并将

   http://localhost:8000/api/callback

   设置为授权重定向 URI 以进行开发。

2. 在

   generateAuthUrl

   中显式设置重定向 URI：确保直接在

   redirect_uri

   调用中指定

   generateAuthUrl

   ，以匹配 Google Console 中的内容。

3. 调整范围：最初，我使用

   'https://www.googleapis.com/auth/drive.file'

   ，但我将其更改为：

   const SCOPES = [
       'https://www.googleapis.com/auth/userinfo.profile',
       'https://www.googleapis.com/auth/userinfo.email'
   ];
   

   进行此更改是为了避免潜在的范围冲突，因为我只需要基本的用户信息进行身份验证。

4. 清除缓存和 Cookies：清除

   localhost

   上的浏览器缓存和 Cookie，并在隐身模式下进行测试以消除任何缓存问题。

5. 控制台日志和网络活动：在浏览器开发人员工具中检查网络日志。我验证了

   authUrl

   路由中生成的

   /google

   与 Google Console 中设置的重定向 URI 匹配。

观察到的行为

• 生产：在

  https://mywebsite.com

  上正常运行，用户能够登录并进行身份验证。
• 开发：在登录模式中的 Google OAuth 流程的最后一步中返回 “origin_mismatch” 错误。

问题

为什么 Google OAuth 仅在开发环境中抛出“origin_mismatch”错误？是否有我可能会忽略的本地主机的特定配置？任何有关如何解决此问题的建议将不胜感激！

Answer 1

这些步骤应该允许 Google 将 localhost 识别为授权来源，从而解决开发环境中的“origin_mismatch”错误。为开发和生产设置单独的凭据也是简化环境特定配置的好习惯。