angular 9 和 spring 启动 2 中请求的资源上不存在“访问控制允许来源”header

Question

I added spring security to the spring boot application and I have some api end points that needs to be called no matter user login or not.(I mean these are the rest end points where I need to retrieve data in my front side angular).

So,I config it as:

@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(securedEnabled = true, proxyTargetClass = true)
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
 
    @Autowired
    private UserDetailsService customUserDetailsService;
 
 
    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
 
    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
        auth
         .userDetailsService(customUserDetailsService)
         .passwordEncoder(passwordEncoder());
    }
 
    @Override
    protected void configure(HttpSecurity http) throws Exception {
    
           http.csrf().
           disable()
               .authorizeRequests()
               .antMatchers(HttpMethod.OPTIONS, "/**")
               .permitAll()
              .antMatchers("/books").permitAll()
            .antMatchers("/api/v1/search/**").permitAll()
            .antMatchers("/admin/**").hasRole("ADMIN")
               .anyRequest()
               .authenticated()
               .and()
               .httpBasic();
              
    }
 
}

I have all the api exposed from: http://localhost:8080/api/v1/ like:

http://localhost:8080/api/v1/books
http://localhost:8080/api/v1/bookcategory

I have configured using .antMatchers("/api/v1/search/**") ,and my config for restendpoint is:

@RequestMapping("/api/v1")
@RestController
@CrossOrigin(origins ="http://localhost:4200")
public class BasicAuthController {

    @GetMapping(path = "/basicauth")
    public AuthenticationBean basicauth() {
        System.out.println("hitted here");
        return new AuthenticationBean("You are authenticated");
    }
    
  
}

I allowed the csfr policy using:

@Configuration
public class RepositoryConfig implements RepositoryRestConfigurer{

    @Autowired
    private EntityManager entityManager;
    
    @Override
    public void configureRepositoryRestConfiguration(RepositoryRestConfiguration config) {
        config.exposeIdsFor(entityManager.getMetamodel().getEntities().stream()
                .map(Type::getJavaType).toArray(Class[]::new));
        
        
        //to handle cross origin
        config.getCorsRegistry().addMapping("/**").allowedOrigins("http://localhost:4200");
    }
}

BookRepository.java

public interface BookRepository extends JpaRepository<Book,Long> {

    @RestResource(path = "categoryid")
    Page<Book>  findByCategoryId(@Param("id") Long id,Pageable pageable);
    
    //to get book by searching
    @RestResource(path = "searchbykeyword")
    Page<Book>  findByNameContaining(@Param("xyz") String keyword,Pageable pageable);
}

front side I have angular 9 as:

auth.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { map } from 'rxjs/operators';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

   // BASE_PATH: 'http://localhost:8080'
   USER_NAME_SESSION_ATTRIBUTE_NAME = 'authenticatedUser';

   public username: String;
   public password: String;
 
   constructor(private http: HttpClient) {
 
   }
 
   authenticationService(username: String, password: String) {
     return this.http.get(`http://localhost:8080/api/v1/basicauth`,
       { headers: { authorization: this.createBasicAuthToken(username, password) } }).pipe(map((res) => {
         this.username = username;
         this.password = password;
         this.registerSuccessfulLogin(username, password);
       }));
   }
 
   createBasicAuthToken(username: String, password: String) {
     return 'Basic ' + window.btoa(username + ":" + password)
   }

}

//i didnot pasted all the codes.

So,I get error as when I goto link http://localhost:4200/books:

Answer 1

The problem is CORS which is a security feature of your browser. It ensures that only resources form the same domain (and port.) can be accessed. Your Angular development server and the Tomcat run on a different port which causes the request to be declined. You have to configure CORS, However. you should know what you are doing because you are basically disabling a security feature. Usually it is not a problem tho. You can do this by adding the annotation @CrossOrigin to your controller methods or by using the Java configuration, For the second cause: I'm sure you'll easily find it on Google :)

Answer 2

I have some projects using Angular+SpringBoot with security and I create a specific Bean to handle with CORS and I never have problem. If you can try, add this method bellow in your WebSecurityConfig class:

@Bean
CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOrigins(Arrays.asList("http://localhost:4200", "http://localhost:8080"));
    configuration.setAllowedMethods(Arrays.asList("GET", "PUT", "POST","OPTIONS", "DELETE"));
    configuration.setAllowedHeaders(Arrays.asList("authorization","content-type"));
    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}

Answer 3

CORS (Cross-Origin Resource Sharing) is a security feature of your browser that prevent authorized sites from using Resources from another origin

in nutshell it happens if your site on x:y origin and requesting resources from a:y, x:b or a:b origins (different port and/or domain)

what exactly happens in nutshell when this is the case

if you made a get (or post...) request from another origin, the browser will first make an option request to the same endpoint, if it's succeeded and has all the allowing headers it will make the get request, if not it will throw the error specifying why it was denied and don't make the original request

so we have two cases now, it's either the headers is returned only on the get request, but not the options one, or it's never returned