Even if Cors Configuration is set on server side, I'm still blocked by CORS policy:

Question

So I have already implemented a spring boot JAVA application as a server and angular as a frontend. So actually, everything works pretty well when I run those locally.

But when I build the Docker images for both and try to test them as containers, I'm facing a CORS error.

since I'm using the JWT token as security, I have disabled the crsf and default spring security token. so here you can see the JAVA configuration for the CORS;

private String url = "http://10.1.2.37:4200";
http.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and().cors().configurationSource(new CorsConfigurationSource() {
    @Override
    public CorsConfiguration getCorsConfiguration(HttpServletRequest request) {
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowedOrigins(Collections.singletonList(url));
        config.setAllowedMethods(Collections.singletonList("*"));
        config.setAllowCredentials(true);
        config.setAllowedHeaders(Collections.singletonList("*"));
        config.setExposedHeaders(Arrays.asList("Authorization"));
        config.setMaxAge(1200L);
        return config;
    }}).and()
    .authorizeRequests()
    .antMatchers("/user").authenticated()
    .antMatchers(HttpMethod.GET, "/user").authenticated()
    .and().csrf().disable()
    .oauth2ResourceServer().jwt().jwtAuthenticationConverter(jwtAuthenticationConverter);
        http.headers().frameOptions().sameOrigin();

and this is the nginx.conf

events{}
http {
    include /etc/nginx/mime.types;
    server {
        listen 80;
        server_name  10.1.2.37;
     
        root /usr/share/nginx/html;
        index index.html;
        location / {
            try_files $uri $uri/ /index.html;
        }
    }
}

even if when I try to run those Docker images in the same network by using --network flag, it's not solved.

how do I run the docker images? for the angular part;

docker run  --network "project"  --name project_frontend -d -p 4200:80 project_front_end

for the backend;

docker run  --network "project"  -d --name project_backend -p 8080:80 project_backend

both of them are up and running. but the thing is when I open the browser to test is I'm getting;

Access to XMLHttpRequest at 'http://10.1.2.37:8080/menu' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I'm about to lose my mind. really. Any help will be appreciated. I'm asking here to understand why this is happening.

Knox · Answer 1 · 2022-06-01T22:49:52.047

You've configured the wrong allowed origin.

Origin has a specific meaning:

The Origin request header indicates the origin (scheme, hostname, and port) that caused the request. For example, if a user agent needs to request resources included in a page, or fetched by scripts that it executes, then the origin of the page may be included in the request.

This effectively means that the configured allowed origin must match the URL that appears in the browser when the request is made. You configured the allowed origin to be your nginx IP, but you are not accessing your frontend through your nginx IP, you're accessing it through http://localhost:4200 as indicated by the error message.

Change your allowed origin to reflect that:

private String url = "http://localhost:4200";

Note that when Spring Security receives an Origin which has not been allowed, it refuses the request with a 403 and does not add any Access-Control-* headers, hence your last error message.

Additionally, you may wish to lower the log level of org.springframework.web.cors.DefaultCorsProcessor to DEBUG for it to log errors when it sees a disallowed origin for debugging purposes.

Even if Cors Configuration is set on server side, I'm still blocked by CORS policy:

1 Answers1