实现OAuth2时如何从React发送请求到Springboot？

Question

我目前是一名 Web 开发新手，我正在尝试使用 React 和 Springboot 与我的前端和后端设置一些基本交互。

我很困惑，一旦我通过 OAuth2 Google 登录验证了自己的身份，我该如何发送请求。我正在使用 axios，并且我已成功在登录后向后端获取用户信息的请求：

useEffect(()=>{
    axios.get('http://localhost:8081/user-info',{withCredentials: true})
    .then(response => {
      setUser(response.data);
    })
    .catch(error =>{
      console.error('Error occured: ',error);
    });
  })

@RestController
public class UserController {

    @GetMapping("/user-info")
    public Map<String, Object> getUserInfo(@AuthenticationPrincipal OAuth2User principal) {
            return principal.getAttributes();
}

响应数据保存成功。不过，使用 withCredentials 属性的目的是什么？对请求有影响吗？有必要吗？我已经设置了一个接受 CORS 的 WebConfig 文件。我不明白为什么当我删除

@AuthenticationPrincipal OAuth2User principal

时会出现 CORS 错误，尽管它可以正常工作。我不知道如何设置正确的发布请求，因为我不断收到 CORS 错误。如果可以演示一个 POST 请求的简单示例，我将不胜感激。

Answer 1

为了帮助澄清问题，这里详细介绍了如何在

OAuth2

设置中在 React 和 Spring Boot 之间发送请求以及为什么

withCredentials

很重要：

1. 为什么

   withCredentials

   ？使用

   OAuth2

   时，身份验证令牌 （如 cookie 或 JWT）存储在客户端上。这

   withCredentials: true

   需要在 axios 中进行设置以确保 这些令牌随每个请求一起发送，以对用户进行身份验证 后端。如果没有它，您的请求将被视为 未经身份验证，这可能就是您得到

   CORS errors

   的原因 没有它。

2. CORS Error

   问题：

   CORS errors

   发生是因为你的前端 （React，通常在 localhost:3000 上运行）正在将请求发送到 不同的来源（Spring Boot at localhost:8081）。

   OAuth2

   安全配置通常需要有效的用户上下文，并且 如果没有有效的令牌或会话，Spring Boot 将返回

   401

   或

   CORS error

   ，因为它无法将客户端识别为

   authenticated

   。
3. 简单示例

   POST Request

   下面是一个基本示例，说明如何 使用 axios 为您的 Spring Boot API 设置

   POST request

   ，确保 包括凭证：

  axios.post('http://localhost:8081/api/resource', {
        data: { key: "value" }
    }, { withCredentials: true })
    .then(response => {
        console.log('Success:', response.data);
    })
    .catch(error => {
        console.error('Error:', error);
    });