我来帮你拆解这两个问题的根源，然后给出具体的解决方案：

问题1：Axios请求触发CORS错误 #

原因分析 #

你用Axios发起/api/auth/google请求时遇到CORS，核心原因是OAuth2的授权流程本身是基于浏览器页面跳转的，AJAX请求（Axios）无法处理这个重定向链：
当你的服务器收到/api/auth/google的请求时，passport.authenticate('google')会立刻返回重定向响应到Google的授权页面（比如https://accounts.google.com/o/oauth2/v2/auth）。这个跨域跳转浏览器会拦截，因为Google的服务器绝不会给你的前端域名添加Access-Control-Allow-Origin响应头，而React的代理设置只能代理到你自己的API，无法处理第三方域名的跨域问题。

解决方案 #

直接放弃Axios请求，改用页面跳转（浏览器原生的跳转不受AJAX跨域限制）：
修改你的React组件代码：

googleAuth = (e) => {
  e.preventDefault();
  // 直接跳转到你的API授权路由，浏览器会自动处理到Google的重定向
  window.location.href = '/api/auth/google';
};

render() {
  return (
    <button onClick={this.googleAuth}>Signin With Google</button>
  );
}

问题2：回调后无法捕获Bearer Token #

原因分析 #

当前你的generateUserToken函数应该是直接返回包含Token的JSON对象，所以浏览器会直接显示这个JSON页面，前端无法捕获Token来更新状态。你需要让后端在生成Token后，重定向回前端页面并携带Token，让前端从URL参数或Cookie中提取Token。

解决方案 #

步骤1：修改后端回调路由的generateUserToken函数

让它生成Token后重定向回前端的专属回调页面，把Token作为URL查询参数传递：

// 假设你已经有生成JWT的逻辑，比如generateJwt函数
const generateUserToken = async (req, res) => {
  // 生成JWT Token
  const token = generateJwt(req.user);
  // 重定向回前端的回调页面（生产环境替换为你的正式前端域名）
  res.redirect(`http://localhost:3000/auth/google/callback?token=${token}`);
};

步骤2：在React中创建回调页面组件

创建一个专门处理认证回调的组件，提取URL中的Token并处理存储和状态更新：

import React, { useEffect } from 'react';
import { useDispatch } from 'react-redux'; // 如果你用Redux

const GoogleAuthCallback = () => {
  const dispatch = useDispatch();

  useEffect(() => {
    // 从URL查询参数中提取Token
    const urlParams = new URLSearchParams(window.location.search);
    const token = urlParams.get('token');

    if (token) {
      // 保存Token到localStorage
      localStorage.setItem('authToken', token);
      // 更新Redux状态（根据你的reducer逻辑调整）
      dispatch({ type: 'SET_AUTH_TOKEN', payload: token });
      // 跳转到首页或其他需要授权的页面
      window.location.href = '/';
    }
  }, [dispatch]);

  return <div>Processing your authentication...</div>;
};

export default GoogleAuthCallback;

步骤3：配置React路由

在你的React路由中添加这个回调页面的路由规则：

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import GoogleAuthCallback from './components/GoogleAuthCallback';

function App() {
  return (
    <Router>
      <Switch>
        {/* 其他路由 */}
        <Route path="/auth/google/callback" component={GoogleAuthCallback} />
      </Switch>
    </Router>
  );
}

额外安全建议 #

• CSRF防护：发起授权请求时可以生成一个随机的state参数，存在localStorage中，后端在回调时验证这个state，防止CSRF攻击；
• 生产环境配置：把前端域名替换为正式域名，不要用localhost；
• Cookie替代方案：如果不想用URL参数传递Token，可以把Token存在HttpOnly Cookie中（生产环境记得开启Secure和SameSite属性），后续API请求会自动携带Cookie，更安全。

内容的提问来源于stack exchange，提问作者user934902