使用Spring Security和Vue.js配置CORS

niknxzdl  于 2024-01-05  发布在  Spring
关注(0)|答案(1)|浏览(145)

我创建了一个Vue-Spring登录API,看起来是正确的。
AuthForm.vue

  1. methods: {
  2. try_auth() {
  3. if (this.check()) {
  4. axios.post('http://localhost:8080/api/login', {
  5. params: {
  6. login: this.usr.login,
  7. password: this.usr.password
  8. }
  9. });
  10. }
  11. },
  12. }

字符串
LoginController.java:

  1. @RestController
  2. @RequestMapping("/api")
  3. @CrossOrigin("http://localhost:8081")
  4. public class LoginContoller {
  5. @RequestMapping(method = RequestMethod.POST, path="/login")
  6. public ResponseEntity<String> handleLoginRequest(@RequestParam String login, @RequestParam String password) {
  7. return ResponseEntity.ok("Authentication successful: " + login + " " + password);
  8. }
  9. }


SecurityConfig.java:

  1. @Configuration
  2. @EnableWebSecurity
  3. public class SecurityConfig {
  4. @Bean
  5. public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
  6. CorsConfiguration corsConfiguration = new CorsConfiguration();
  7. corsConfiguration.setAllowedHeaders(List.of("Authorization", "Cache-Control", "Content-Type"));
  8. corsConfiguration.setAllowedOrigins(List.of("*"));
  9. corsConfiguration.setAllowedMethods(List.of("GET", "POST", "PUT", "DELETE", "PUT","OPTIONS","PATCH", "DELETE"));
  10. corsConfiguration.setAllowCredentials(true);
  11. corsConfiguration.setExposedHeaders(List.of("Authorization"));
  12. http.cors(Customizer.withDefaults())
  13. .authorizeHttpRequests((authorizeRequests) ->
  14. authorizeRequests
  15. .requestMatchers("/**").hasRole("USER")
  16. )
  17. .formLogin((formLogin) ->
  18. formLogin
  19. .loginPage("/login")
  20. .defaultSuccessUrl("/main")
  21. .permitAll()
  22. );
  23. return http.build();
  24. }
  25. @Bean
  26. public UserDetailsService userDetailsService(PasswordEncoder passwordEncoder) {
  27. UserDetails user =
  28. User.builder()
  29. .username("user")
  30. .password(passwordEncoder.encode("password"))
  31. .roles("USER")
  32. .build();
  33. return new InMemoryUserDetailsManager(user);
  34. }
  35. @Bean
  36. public PasswordEncoder passwordEncoder() {
  37. return new BCryptPasswordEncoder();
  38. }
  39. }


然而,当我尝试执行try_auth()方法时,我在控制台中得到了x1c 0d1x。我实现错了什么?Vue项目部署在8081端口,Tomcat运行在8080端口,我的问题和CORS issue - No 'Access-Control-Allow-Origin' header is present on the requested resource不同,因为这个方案不适合我,我仍然得到403错误,不知道如何修复它。我的LoginController可能被错误地使用。所以,这是我修复后的代码:LoginController没有改变。前端的Axios也没有改变。SecurityConfig:

  1. @Configuration
  2. @EnableWebSecurity
  3. public class SecurityConfig {
  4. @Bean
  5. public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
  6. http.cors(withDefaults())
  7. .authorizeHttpRequests((authorizeRequests) ->
  8. authorizeRequests
  9. .requestMatchers("/**").hasRole("USER")
  10. )
  11. .formLogin((formLogin) ->
  12. formLogin
  13. .loginPage("/login")
  14. .defaultSuccessUrl("/main")
  15. .permitAll()
  16. );
  17. return http.build();
  18. }
  19. @Bean
  20. public UserDetailsService userDetailsService(PasswordEncoder passwordEncoder) {
  21. UserDetails user =
  22. User.builder()
  23. .username("user")
  24. .password(passwordEncoder.encode("password"))
  25. .roles("USER")
  26. .build();
  27. return new InMemoryUserDetailsManager(user);
  28. }
  29. @Bean
  30. public PasswordEncoder passwordEncoder() {
  31. return new BCryptPasswordEncoder();
  32. }
  33. @Bean
  34. CorsConfigurationSource corsConfigurationSource() {
  35. CorsConfiguration configuration = new CorsConfiguration();
  36. configuration.setAllowedOrigins(List.of("http://localhost:8081"));
  37. configuration.setAllowedMethods(Arrays.asList("GET","POST"));
  38. UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
  39. source.registerCorsConfiguration("/**", configuration);
  40. return source;
  41. }
  42. }


还有

  1. Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/api/login. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 403.

lg40wkob

lg40wkob1#

为什么出错:

  • 你的http.corsSecurityConfig.java不允许请求形式端口8081.这是Spring默认安全现象
    如何解决这个问题:
  • 你必须允许你的端口8081在java应用程序内.我们可以这样做如下
  • 您需要更新registry.addMapping和allowedMethods
  1. @Configuration
  2. public class CorsConfig implements WebMvcConfigurer {
  3. @Override
  4. public void addCorsMappings(CorsRegistry registry) {
  5. registry.addMapping("/api/**")
  6. .allowedOrigins("http://localhost:8081")
  7. .allowedMethods("GET", "POST", "PUT", "DELETE")
  8. .allowedHeaders("*");
  9. }
  10. }

字符串

  • 请更新您的安全配置如下
  1. @Bean
  2. public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
  3. http .csrf(AbstractHttpConfigurer::disable)
  4. .cors(Customizer.withDefaults())
  5. .authorizeHttpRequests((authorizeRequests) ->
  6. authorizeRequests
  7. .requestMatchers("/**").hasRole("USER")
  8. )
  9. .formLogin((formLogin) ->
  10. formLogin
  11. .loginPage("/login")
  12. .defaultSuccessUrl("/main")
  13. .permitAll()
  14. );
  15. return http.build();
  16. }

展开查看全部

相关问题