How to connect angular +nginx docker containers to spring and not get cors error?

Viewed 29

My problem is that every time I make a request to the server, I get a CORS error. I have tried making curl requests from the frontend container to the server, they are on the same network and everything works, if I run the containers locally there is no problem either.

Here are my settings:

I did not change anything in nginx.conf

my confing which replaces default.conf

server {
  listen 80;
  sendfile on;
  default_type application/octet-stream;

  gzip on;
  gzip_http_version 1.1;
  gzip_disable      "MSIE [1-6]\.";
  gzip_min_length   256;
  gzip_vary         on;
  gzip_proxied      expired no-cache no-store private auth;
  gzip_types        text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript;
  gzip_comp_level   9;

  root /usr/share/nginx/html;

  location / {
    try_files $uri $uri/ /index.html =404;
  }
}

docker-compose

    version: "3.5"
services:
  backend:
    image: spring_backend
    container_name: spring
    build:
      context: ./
    expose:
      - 8080
    restart: always
    networks:
      - reverse-proxy

  frontend:
    image: angular_frontend
    container_name: angular
    build: https://github.com/some_repo/frontend.git
    ports:
      - "80:80"
    restart: always
    networks:
      - reverse-proxy

networks:
  reverse-proxy:
    name: reverse-proxy

angular enviroment

export const environment = {
  url: 'http://spring:8080/',
  production: true,
};

backend config


@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    private final PersonDetailsService personDetailsService;
    private final JWTFilter jwtFilter;

    @Autowired
    public SecurityConfig(PersonDetailsService personDetailsService, JWTFilter jwtFilter){
        this.personDetailsService = personDetailsService;
        this.jwtFilter = jwtFilter;
    }

    @SneakyThrows(Exception.class)
    protected void configure(HttpSecurity http) {
        http
                .csrf().disable()
                .cors().configurationSource(corsConfigurationSource())
                .and()
                .authorizeRequests().antMatchers("/login","/register").permitAll()
                .anyRequest().hasAnyRole("USER")
                .and()
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS);

        http.addFilterBefore(jwtFilter, UsernamePasswordAuthenticationFilter.class);
    }

    @SneakyThrows(Exception.class)
    protected void configure(AuthenticationManagerBuilder auth) {
        auth.userDetailsService(personDetailsService);
    }
    @Bean
    public PasswordEncoder getPasswordEncoder(){
        return new BCryptPasswordEncoder();
    }

    @Bean
    @SneakyThrows(Exception.class)
    public AuthenticationManager authenticationManagerBean() {
        return super.authenticationManagerBean();
    }
    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.addAllowedOrigin("*");
        configuration.addAllowedHeader("*");
        configuration.addAllowedMethod("*");
        configuration.addExposedHeader("*");
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }

}

Today I decided to make a request through postman and noticed that nginx returns to me a 405 error and the spring server does not receive the request. With Mozilla Firefox requests are not sent at all, only a cors error is returned

1 Answers

CORS is all about backend side problem.

Basically, it can be solved by add Access-Control-Allow-Origin * to server config to allow other website can consume your service.

nginx.conf

server {
   ...
   add_header Access-Control-Allow-Origin *;
   ...
}
Related