提交JavaScript请求时，Spring Boot中的请求参数为空，但适用于正常请求

Question

我已经浪费了10个小时试图弄明白一件简单的事情。

我有一个反应前端和一个Spring Boot后端在端口8080上运行。

我在前端有自己的登录表单。

在一个理想的世界里，我所希望的是让Spring Boot像往常一样进行表单验证，而没有那个丑陋的引导表单。

我设置了一个基本的内存身份验证只是为了练习，但它根本不起作用

我有两个选择：

>

在Restendpoint中处理身份验证，然后将安全上下文设置为Restendpoint，而不是过滤器

以下是代码：

配置文件：

@Configuration
@EnableWebSecurity
public class WebSecurity extends WebSecurityConfigurerAdapter {

    @Autowired
    private TestFilter testFilter;

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.inMemoryAuthentication()
                .withUser("mama")
                .password("mama")
                .roles("AUTH");
    }


    @Override
    protected void configure(HttpSecurity http) throws Exception {
        //Request authorization
        http
                .authorizeRequests()
                .mvcMatchers("/api/vault").hasRole("AUTH")
                .mvcMatchers("/api/vault/**").hasRole("AUTH")
                .mvcMatchers("/**").permitAll();

        //Disable default authentication behaviour:
        //http.httpBasic().disable();

       http.formLogin()
                .loginPage("/")
                .loginProcessingUrl("/login")
                .defaultSuccessUrl("/auth-success")
                .failureUrl("/auth-failure");

        //CSRF Protection:
        HttpSessionCsrfTokenRepository repository = new HttpSessionCsrfTokenRepository();
        repository.setHeaderName("X-CSRF-TOKEN");
        repository.setParameterName("_csrf");
        http.csrf()
                .csrfTokenRepository(repository);

        http.addFilterBefore(testFilter, UsernamePasswordAuthenticationFilter.class);

    }

    @Bean
    public PasswordEncoder passwordEncoder(){
        return NoOpPasswordEncoder.getInstance();
    }
}

默认控制器：

@Controller
public class App {

    /**
     * 
     */
    @GetMapping(value = "/{path:[^\\.]*}")
    public String index() {
        return "index";
    }

}

简单测试API：

@RestController
public class TestApi {

    @GetMapping(value = "/api/get-csrf", consumes = {"application/json"})
    public CsrfTestResponse getCsrf(HttpServletRequest request){

        TestingLombokWorks testingLombokWorks = new TestingLombokWorks("Mama", "Mama is the best!");

        CsrfToken token = new HttpSessionCsrfTokenRepository().loadToken(request);
        CsrfTestResponse testResponse = new CsrfTestResponse();
        testResponse.setCsrfHeaderName(token.getHeaderName());
        testResponse.setCsrfParameterName(token.getParameterName());
        testResponse.setCsrfToken(token.getToken());
        testResponse.setTestingLombokWorks(testingLombokWorks);
        return testResponse;
    }

    @GetMapping("/api/welcome")
    public String publicResource(){
        return "Welcome API!";
    }

    @GetMapping("/api/login-success")
    public String loginSuccess() {
        return "Login Successful!";
    }

    @PostMapping("/api/post-test")
    public CsrfTestResponse postTest(HttpServletRequest request){

        CsrfToken token = new HttpSessionCsrfTokenRepository().loadToken(request);

        CsrfTestResponse testResponse = new CsrfTestResponse();
        testResponse.setCsrfHeaderName(token.getHeaderName());
        testResponse.setCsrfParameterName(token.getParameterName());
        testResponse.setCsrfToken(token.getToken());
        return testResponse;
    }

    @PostMapping("/login")
    public String testLogin(){
        return "Login Works?!";
    }

    @GetMapping("/auth-success")
    public String authSuccess(){
        return "Auth Success!";
    }

    @GetMapping("/auth-failure")
    public String authFailure(){
        return "Auth Failure!";
    }

}

要测试的过滤器：

@Component
public class TestFilter extends OncePerRequestFilter {

    @Override
    protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain) throws ServletException, IOException {
        System.out.println("Username?: " + request.getParameter("username"));
        System.out.println("Password?: " + request.getParameter("password"));
        filterChain.doFilter(request, response);
    }
}

反应前端：

import React from 'react'
import { useForm } from 'react-hook-form'

export default function Login(props) {

    const {register, handleSubmit, formState} = useForm();

    return (
        <form onSubmit={handleSubmit((data, event) => {

                event.preventDefault();

                let formData = new FormData();
                formData.append("username", data.username);
                formData.append("password", data.password);

                let body = new URLSearchParams(formData);

                let str = `username=${data.username}&password=${data.password}`;

                console.log(str);

                fetch('/login', {
                    method: 'POST',
                    credentials: 'include',
                    headers: {
                        'Content-Type': 'application/json',
                        Accept: '*/*',
                        [props.csrfHeaderName]: props.csrfToken
                    },
                    body: str
                })
                .then(response => response.text())
                .then(data => console.log(data))
                .catch(error => console.log(error));
               
            })}
        >
            <legend>Login</legend>
            <div>
                <input 
                    {
                        ...register("username", {
                            value: "",
                            required: true,
                        })
                    } 
                    type="text"
                    placeholder='Username: '
                />
            </div>
            <div>
                <input 
                    {
                        ...register("password", {
                            value: "",
                            required: true,
                        })
                    } 
                    type="password"
                    placeholder='Password: '
                />
            </div>
            <button type='submit'>Login</button>
        </form>
    )
}

我创建了一个测试过滤器只是为了测试，它证明了我的观点。当使用正常的服务器端呈现的默认Spring Boot表单提交表单时，请求可以工作，但当使用JavaScript发送请求时，请求失败。

当我看到登录请求的日志时，我根本没有看到它到达那个endpoint，而是直接转到 /auth-failure：

Username?: null
Password?: null
Username?: null
Password?: null
2022-04-04 15:53:45.960 DEBUG 20327 --- [nio-8080-exec-5] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped to com.example.springreact.api.TestApi#authFailure()
2022-04-04 15:53:45.960 DEBUG 20327 --- [nio-8080-exec-5] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped to com.example.springreact.api.TestApi#authFailure()
2022-04-04 15:53:45.960 DEBUG 20327 --- [nio-8080-exec-5] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped to com.example.springreact.api.TestApi#authFailure()
2022-04-04 15:53:45.961 DEBUG 20327 --- [nio-8080-exec-5] o.s.web.servlet.DispatcherServlet        : GET "/auth-failure", parameters={}
2022-04-04 15:53:45.961 DEBUG 20327 --- [nio-8080-exec-5] s.w.s.m.m.a.RequestMappingHandlerMapping : Mapped to com.example.springreact.api.TestApi#authFailure()
2022-04-04 15:53:45.961 DEBUG 20327 --- [nio-8080-exec-5] m.m.a.RequestResponseBodyMethodProcessor : Using 'text/plain', given [*/*] and supported [text/plain, */*, text/plain, */*, application/json, application/*+json, application/json, application/*+json]
2022-04-04 15:53:45.961 DEBUG 20327 --- [nio-8080-exec-5] m.m.a.RequestResponseBodyMethodProcessor : Writing ["Auth Failure!"]
2022-04-04 15:53:45.962 DEBUG 20327 --- [nio-8080-exec-5] o.s.web.servlet.DispatcherServlet        : Completed 200 OK

我想知道进行这种简单身份验证的最佳方法是什么。

我尝试了一切可以想象的方法，我用ObjectMapper尝试了JSON post body，它抛出了IOException，没有任何有意义的错误消息，

Java有时会令人沮丧，甚至过时，当你最终花10个小时去做简单的事情时。

Answer 1

Java有时会令人沮丧，甚至过时，当你最终花10个小时去做简单的事情时。

这不能说。只是你错过了很多重要的信息来理解它为什么会失败。

（1）

http.formLogin()
                .loginPage("/")
                .loginProcessingUrl("/login")
                .defaultSuccessUrl("/auth-success")
                .failureUrl("/auth-failure");

这是为了与Spring MVC一起使用，不在使用@RestController所指示的Rest Spring Boot应用范围内。Spring登录表单旨在交付html表单，系统使用MVC模式进行授权。它不符合您的需求，因为您有另一个前端和另一个框架来执行简单的ajax调用。

第二）

在你明白为什么（1）失败后，你必须决定你可以走哪条路。您可以切换到基本身份验证，也可以尝试实现更复杂的东西，比如JWT身份验证令牌。如果你搜索得足够多，可以找到更多的解决方案，但我想说最常见的就是我在这里提到的那些。

调整应用程序以使用其中一种安全结构，然后更新前端以进行此类调用，您应该会没事。