Spring+React+OAuth实现谷歌登录时POST /google-login报404错误求助

问题描述 #

使用Spring+React+OAuth实现登录功能时，前端向http://localhost:8000/google-login发送POST请求持续返回404（Not Found），需排查代码问题。

前端相关代码 #

Login.js（登录组件） #

import { GoogleLogin } from 'react-google-login';
import Axios from 'axios';

const config = {
    headers: {
        'Content-Type': 'application/json; charset=utf-8',
    },
};

const responseGoogle = async (response, props) => {
    try {
        console.log('Google Login Response:', response);
        const postData = {
            tokenId: response.tokenId,
        };
        let jwtToken = await Axios.post(
            'http://localhost:8000/google-login',
            JSON.stringify(postData),
            config
        );
        if (jwtToken.status === 200) {
            console.log('JWT Token:', jwtToken.data);
            localStorage.setItem('jwtToken', jwtToken.data);
            props.onLogin(jwtToken.data);
        }
    } catch (error) {
        console.error('Google Login Error:', error);
    }
};

const Login = ({ onLogin }) => {
    return (
        <GoogleLogin
            clientId="1054743034506-atjsapju5vt05ugd9oesgdi2mqqq5cir.apps.googleusercontent.com"
            buttonText="Login"
            onSuccess={(res) => responseGoogle(res, { onLogin })}
            onFailure={(res) => responseGoogle(res, { onLogin })}
            cookiePolicy={'single_host_origin'}
        />
    );
};

export default Login;

App.js（主应用组件） #

import Axios from 'axios';
import React, { useEffect, useState } from 'react';
import './App.css';
import Login from './Login';

function App() {
  const [user, setUser] = useState(null);
  const [jwtToken, setJwtToken] = useState(localStorage.getItem('jwtToken'));

  const config = {
    headers: {
      Authorization: 'Bearer ' + jwtToken,
    },
  };

  const getUser = async () => {
    try {
      let res = await Axios.get('http://localhost:8000/api/user', config);
      setUser(res.data);
    } catch (error) {
      console.error('获取用户信息失败:', error);
    }
  };

  const handleLogin = (token) => {
    setJwtToken(token);
    localStorage.setItem('jwtToken', token);
  };

  const handleLogout = () => {
    setJwtToken(null);
    localStorage.removeItem('jwtToken');
    setUser(null);
  };

  const fetchData = async () => {
    // 补充后端数据获取逻辑
    try {
      let res = await Axios.get('http://localhost:8000/api/data', config);
      console.log('后端数据:', res.data);
    } catch (error) {
      console.error('获取后端数据失败:', error);
    }
  };

  useEffect(() => {
    if (jwtToken) {
      getUser();
    }
  }, [jwtToken]);

  return (
    <div>
      <Login onLogin={handleLogin} />
      {jwtToken ? (
        <div>
          <h1>/user : {user ? user.username : '无用户信息'}</h1>
          <button onClick={getUser}>获取用户信息</button>
          <button onClick={handleLogout}>退出登录</button>
          <button onClick={fetchData}>获取后端数据</button>
        </div>
      ) : (
        <p>请先登录</p>
      )}
    </div>
  );
}

export default App;

Index.js #

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

错误信息 #

Login.js:21 
 POST http://localhost:8000/google-login 404 (Not Found)
Login.js:33 Google Login Error: 
Error: Request failed with status code 404
    at createError (createError.js:16:1)
    at settle (settle.js:17:1)
    at XMLHttpRequest.handleLoad (xhr.js:61:1)

排查与解决步骤 #

1. 核心问题：后端未配置对应接口 #

404本质是Spring后端没有暴露/google-login的POST端点，需检查：

• 确认存在标注@PostMapping("/google-login")的Controller方法
• 检查Controller类是否添加@RestController注解，且被Spring启动类扫描到
• 若Spring配置了server.servlet.context-path，需在请求URL中添加对应前缀（比如配置为/api则URL是http://localhost:8000/api/google-login）

示例Spring Controller代码：

import org.springframework.web.bind.annotation.*;

@RestController
@CrossOrigin(origins = "http://localhost:3000") // 允许前端跨域请求
public class AuthController {

    @PostMapping("/google-login")
    public String verifyGoogleToken(@RequestBody GoogleTokenRequest request) {
        // 实现Google tokenId验证逻辑，返回生成的JWT
        return "your-generated-jwt-token";
    }

    // 定义接收参数的实体类
    static class GoogleTokenRequest {
        private String tokenId;
        public String getTokenId() { return tokenId; }
        public void setTokenId(String tokenId) { this.tokenId = tokenId; }
    }
}

2. 前端代码修正 #

• 补充GoogleLogin组件的导入，避免运行报错
• 修复Login组件的onLogin回调触发逻辑，确保登录成功后通知App组件更新状态
• 补充App中未定义的fetchData函数，移除或实现对应功能

3. 验证后端接口可用性 #

用Postman或curl直接测试后端接口：

curl -X POST http://localhost:8000/google-login -H "Content-Type: application/json" -d '{"tokenId": "test-token"}'

若仍返回404，需检查Spring启动日志，确认Controller是否被正确加载，端口是否为8000。

内容的提问来源于stack exchange，提问作者신재은