CORS blocked by No "Access-Control-Allow-Origin" on dockerized Angular frontend app and Spring Boot dockerized backend

Question

I have built an Angular app and created a docker image, which makes it run on an Nginx server (once it is run). For the backend, I have a dockerized implementation as well. While trying to access the data from the backend, I face the error with regard to CORS policy-related, such that on the browser I see the following: "...has been blocked by CORS policy: No "Access-Control-Allow-Origin" header is present..."

In order to solve the problem, I tried different configuration changes within the Nginx server, for example: (1) setting the add_header "Access-Control-Allow-Origin" "http://0.0.0.0:8080", (2) trying similar change while on the proxy-side, proxy_set_header "Access-Control-Allow-Origin" "http://0.0.0.0:8080", etc. But none of them worked (Note, with "http://0.0.0.0:8080" referring to the backend, whereas to the Angularhaving access through "http://0.0.0.0:7000").

An example of how my configuration file looks like is given in the following:

server { 
    listen 80;
    location / {
        root /usr/share/nginx/html;
        index index.html index.htm;
        try_files $uri $uri /index.html = 404;
    }

    location /api {
         proxy_pass http://0.0.0.0:8080;
         proxy_set_header "Access-Control-Allow-Origin" "http://0.0.0.0:8080"
     }
}

Could please any of you share any idea of how to solve this issue?

Thanks!

Answer 1

It is the web client (wherever the web client that is blocked happens to be placed in your setup) that does the actual blocking, so you need to permit the source address the client is intending to use with the injected Access-Control-Allow-Origin header.

This header and value must be known by the client prior to it sending the request (which fails for you), so an earlier response needs to have provided it.

As seen in the link, the header syntax does not include port numbers. As far as I know, 0.0.0.0 is not a syntax CORS interprets in the same way as network services, but have not tested this and could be wrong.

Neither does the header specify protocol as far as I know, but only the fqdn, e.g. www.example.com.

I would guess a specific ip address could work instead of a fqdn, but have not tested this and could be wrong.

However, I have used the wildcard syntax (*) specified in the link and this does work. A more specific address is preferrable when possible, but one can start with the wildcard and see that the header injection works at all first.

So try injecting Access-Control-Allow-Origin: * is my suggestion.

Answer 2

Their is no need to add any thing in nginx conf like proxy_set_header .You have to add CORS origin filter in your spring web application and allowed from a different origins.

Like this :

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
@Slf4j
public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        final HttpServletResponse response = (HttpServletResponse) res;
        log.info("request came for url {}", ((HttpServletRequest) req).getRequestURL());
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Allow-Headers", "Authorization, Content-Type");
        response.setHeader("Access-Control-Max-Age", "3600");
        if (HttpMethod.OPTIONS.name().equalsIgnoreCase(((HttpServletRequest) req).getMethod())) {
            response.setStatus(HttpServletResponse.SC_OK);
        } else {
            chain.doFilter(req, res);
        }
    }

    @Override
    public void destroy() {
    }

    @Override
    public void init(FilterConfig config) throws ServletException {
    }
}