java - Angular 和 Spring boot - POST 请求成为选项

Question

我正在使用 Spring boot(和 Spring Security)开发我的 API，并使用 Angular 开发前端。

TypeScript 代码:

return this.http.post<any>('http://localhost:8080/users',
        {
            firstName: 'Clemi',
            lastName: 'Le boss',
            mail: 'clemclem'
        });

我的 Controller :

@RestController
@RequestMapping(path = "/users")
public class UserController
{
    @Autowired
    private UserService userService;
...
    @PostMapping()
    public ResponseEntity<Object> addUser(Principal principal, @RequestBody User user) {
        User savedUser = userService.save(user);

        return new ResponseEntity<Object>(HttpStatus.OK);
    }

}

以及安全配置:

@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Autowired
    UserService userDetailsService;

    @Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception {
        auth.userDetailsService(userDetailsService).passwordEncoder(bCryptPasswordEncoder());
    }
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf()
                .disable()
                .exceptionHandling()
                .authenticationEntryPoint(new Http403ForbiddenEntryPoint() {
                })
                .and()
                    .authenticationProvider(getProvider())
                    .formLogin()
                    .loginProcessingUrl("/login")
                    .successHandler(new AuthentificationLoginSuccessHandler())
                    .failureHandler(new SimpleUrlAuthenticationFailureHandler())
                .and()
                    .logout()
                    .logoutUrl("/logout")
                    .logoutSuccessHandler(new AuthentificationLogoutSuccessHandler())
                    .invalidateHttpSession(true)
                .and()
                    .authorizeRequests()
                    .antMatchers("/login").permitAll()
                    .antMatchers("/logout").permitAll()
                    .antMatchers(HttpMethod.GET, "/users/**").authenticated()
                    .antMatchers(HttpMethod.DELETE, "/users/**").hasRole("ADMIN")
                    .antMatchers(HttpMethod.PUT).hasRole("USER")
                    .anyRequest().permitAll()
                .and()
                    .httpBasic();
    }

    @Bean
    public BCryptPasswordEncoder bCryptPasswordEncoder() {
        return new BCryptPasswordEncoder();
    }

    private class AuthentificationLoginSuccessHandler extends SimpleUrlAuthenticationSuccessHandler {
        @Override
        public void onAuthenticationSuccess(HttpServletRequest request,
                                            HttpServletResponse response, Authentication authentication)
                throws IOException, ServletException {
            response.setStatus(HttpServletResponse.SC_OK);
        }
    }

    private class AuthentificationLogoutSuccessHandler extends SimpleUrlLogoutSuccessHandler {
        @Override
        public void onLogoutSuccess(HttpServletRequest request, HttpServletResponse response,
                                    Authentication authentication) throws IOException, ServletException {

            response.setStatus(HttpServletResponse.SC_OK);
        }
    }

    @Bean
    public AuthenticationProvider getProvider() {
        AuthService provider = new AuthService();
        provider.setUserDetailsService(userDetailsService);
        provider.setPasswordEncoder(bCryptPasswordEncoder());
        return provider;
    }
}

当我使用 postman 时，我的请求工作正常。但是当我使用我的前端时，每个请求都会变成 OPTIONS 请求。我阅读了多篇文章，解释这是因为跨源请求，并且可能是“预检请求”，但我不知道如何修复它......

有什么想法吗？

Answer 1

该行为是由于 CORS 引起的。有两种方法来处理这种行为。

1. ACCEPT HEADER 在服务器端。这确实可行，但是在服务器代码上添加 accept header 并不是一个好习惯。
2. PROXY 对于任何具有 service、frontend 的应用程序来说，一个非常常见的架构是它们之间有代理管理器，例如 nginx,apache。但这同样适用于生产环境。出于开发目的，Angular cli 与内置的 lite-server 捆绑在一起，该服务器在 ngserve 上托管实时预览。以下是所需的配置在lite服务器上设置代理。

我。在 Angular 项目的根目录下创建一个名为 proxy-config.json 的文件。二.根据服务器地址添加以下内容。

{
  "/api": {
    "target": "http://localhost:8080/",
    "changeOrigin": true,
    "secure": false,
    "pathRewrite": {
       '^/api': ''
     }
   }
}

/api 是 Angular 应用程序所有端点的 proxy 部分

http://localhost:8080/accounts(实际服务器端点) -----> http://localhost:8080/api/accounts(代理端点)

然后在package.json中修改以下脚本命令

"start": "ng serve --proxy-config proxy.config.json --port 4200",