431（请求头字段太大）Vue + Springboot + SpringSecurity答案

【问题标题】：431 (Request Header Fields Too Large) Vue + Springboot + SpringSecurity431（请求头字段太大）Vue + Springboot + SpringSecurity
【发布时间】：2021-03-10 05:42:04
【问题描述】：

我在 Springboot 中对我的后端进行 axios 调用时收到 431 错误，我不知道为什么。我的 Vue 前端在 3000 端口上运行，我的 Tomcat 服务器在 8080 端口上。我需要做些什么来配置更小的标头吗？

axios 调用 -

  submit() {
    axios.post('/api/v1/auth/sign-in', {
      email: this.email,
      password: this.password,
      staySignedIn: this.staySignedIn
    })
    .then(function(res) {
      if(res.data.code === 200) {
        this.router.push('/dashboard')
      }
      else {
        this.msg = response.message;
      }
    })
    .catch(function(err) {
      this.msg = 'error';
    })
  }

登录控制器 -

@Controller
@RestController
@RequestMapping("/api/v1/auth")
public class LoginController {

    @Autowired
    UserService userService;


    @PostMapping("/sign-in")
    public String signIn(@RequestBody User user) {
        User userEmailExists = userService.findUserByEmail(user.getEmail());

        // Test
        if(userEmailExists.getEmail().isEmpty()) {
            return "Nothing";
        }
        else {
            return "SignIn";
        }
    }
}

我的安全 -

@Override
protected void configure(HttpSecurity http) throws Exception {
    http.authorizeRequests()
            .anyRequest().authenticated()
            .and()
            .formLogin()
            .loginPage("/api/v1/auth/sign-in")
            .defaultSuccessUrl("/dashboard", true)
            .permitAll()
            .and()
            .logout().deleteCookies("JSESSIONID")
            .and()
            .rememberMe().key("uniqueAndSecret");
            http.cors();
}

【问题讨论】：

网络浏览器控制台中的请求是什么样子的
@Toerktumlare 不确定您的意思，这就是我在控制台中看到的全部内容 - POST localhost:3000/api/v1/auth/sign-in 431（请求标头字段太大）
如果你在浏览器中按 F12 并在 chrome 中选择“网络”，你可以看到所有请求，在那里你会发现你的请求和响应是什么样的
developers.google.com/web/tools/chrome-devtools/network
@Toerktumlare 我在上面添加了一张图片

标签： spring-boot vue.js spring-security

【解决方案1】：

您的请求是针对 localhost:3000 而不是 localhost:8080 完成的，这就是您收到错误的原因。

例如，如果你在前端运行一个 react 应用，它是由 create-react-app 创建的

您可以在package.json 中定义proxy

"proxy": "http://localhost:8080"

它会被自动抓取。

proxy requests in a react app in development

编辑：

现在看到您正在使用 vue，我没有使用 vue.js 的经验，但我确实找到了指向 Vue.js — How To Proxy To Backend Server 的链接

【讨论】：

我正在运行 Springboot
是的，但不是在前端，我看到你正在使用 vue，我没有使用 vue 的经验，但我找到了一些可能对你有帮助的链接。但如前所述，您的请求发错地方了。
如果您觉得对您有帮助，请标记为正确答案