2

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!

Leo
  • 21
  • 1
  • 3

2 Answers2

0

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.

ErikE
  • 4,676
  • 1
  • 19
  • 25
  • thanks for your message. I tried adding "Access-Control-Allow-Origin" "* " and also changed the syntax you suggested, but it does not work. – Leo Jul 01 '20 at 09:04
0

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 {
    }
}
  • thanks for writing. Actually, I do not have access on the backend side - I can only use the docker image. – Leo Jul 02 '20 at 20:33
  • it is not docker which is giving you an error. its you backend api which is restricting. so you have to ask to the person who have access to allow you server request – varun saini Jul 03 '20 at 19:23
  • Thanks for your reply. Actually, there should be a way to proxy the requests towards the backend. Now, I modified the URL (in the Angular app) I was making the calls towards to, such that instead of having "0.0.0.0:8080/api/" for the requests, I set it to only "/api" - but now dealing with other issues, still not being able to access the backed data. – Leo Jul 04 '20 at 08:16
  • ok, please update your answer once you find out. – varun saini Jul 07 '20 at 04:43