CORS working for local app, CORS not working for app in Docker

General Discussions
1

I have a web app with three separate components(Angular, API, and IdentityServer4). The app uses CORS so that each component can communicate with one another since they are all on different ports

(Angular:5004, API:5335, IDServer:5000).

Using CORS in the app locally works just fine, I have no trouble accessing any component of the app.

However, when building the Docker images/containers for each component and have them running in a
docker-compose file, the API does not return any data from the database post-login. And I receive the following error:

Access to XMLHttpRequest at 'http://localhost:5335/api/users/email/user@email.com' from origin 'http://localhost:5004' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Furthermore, I receive the following errors in the API container logs:

**fail: Microsoft.AspNetCore.Authentication.JwtBearer.JwtBearerHandler[3]**
**fail: Microsoft.AspNetCore.Diagnostics.DeveloperExceptionPageMiddleware[1]**

I know that this CORS issue can be resolved by using a reverse-proxy server such as Nginx. And I know that it requires a nginx.conf file to help direct all the container traffic.

My problem is that I am not sure the proper way to set up this file correctly, and have it communicate with other containers properly. My current .conf file looks like this, but has not produced any results:

server {
    listen       8080;
    server_name  localhost;
    
    location / {

     if ($request_method = 'OPTIONS') {

        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;

        return 204;
     }

     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    }

     if ($request_method = 'GET') {

        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
}
}

I am somewhat of a newbie to Docker, and have no experience working with an Nginx reverse-proxy. Can someone please point me in the right direction here? I have been plugging away at this for about a week now, but to no avail. Any assistance at all would be greatly appreciated. Thank you.

2

You have to “proxy” the request to the docker host:port, like:

 location /api {
      rewrite ^/api/(.*) /$1 break;
      proxy_redirect off;
      proxy_pass http:/API:5335;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto https;
      proxy_set_header Authorization $http_authorization;
    }

Here’s an example

1 Like
3

It doesn’t seem to want to build the nginx container with that included in the default.conf file, or maybe I am doing this wrong somehow:

server {
    listen 80;
    sendfile on;
    server_name  localhost;
    
    location /api {

      rewrite ^/api/(.*) /$1 break;
      proxy_redirect off;
      proxy_pass http://localhost:5335;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header X-Forwarded-Proto https;
      proxy_set_header Authorization $http_authorization;
    }

     if ($request_method = 'OPTIONS') {

        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';

        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        add_header 'Content-Length' 0;

        return 204;
     }

     if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
    }

     if ($request_method = 'GET') {

        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Credentials' 'true';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS' always;
        add_header 'Access-Control-Allow-Headers' 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
}
}
}
4

Any updates on this? I’m run into the same issues.

1 Like
5

im asking the same, did you manage to get it to work?

6

I got the same issue. angular docker call rest api located on another host.
I angular docker run locally- application works, if angular docker run somewhere - I got “cross origin exception”