使用 NGINX 和 AWS Elastic Beanstalk 配置 CORS

Question

My app is an AWS EC2 instance, I have some problems with a CORS error.

It works great on a local server but not on a production server. My app is an angular 11 app in the frontend. Its a Spring Boot API. It is deployed in aws elastic beanstalk, I understand that aws uses nginx and this is what is generating the cors error for me

Then I tried a solution I found around: file path.ebextensions\nginx file nginx.conf

user                    nginx;
error_log               /var/log/nginx/error.log warn;
pid                     /var/run/nginx.pid;
worker_processes        auto;
worker_rlimit_nofile    33282;

events {
    worker_connections  1024;
}

http {
  include       /etc/nginx/mime.types;
  default_type  application/octet-stream;

  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                    '$status $body_bytes_sent "$http_referer" '
                    '"$http_user_agent" "$http_x_forwarded_for"';

  include       conf.d/*.conf;

  map $http_upgrade $connection_upgrade {
      default     "upgrade";
  }

  server {
      listen        80;
      server_name   dominio.com;
      root /var/app/current/public;

      location / {
        # Simple requests
        if ($request_method ~* "(GET|POST)") {
          add_header "Access-Control-Allow-Origin"  *;
        }

        # Preflighted requests
        if ($request_method = OPTIONS ) {
          add_header "Access-Control-Allow-Origin"  *;
          add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";
          add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";
          return 200;
        }
      }

      location /api {
          proxy_pass          http://127.0.0.1:5000;
          proxy_http_version  1.1;

          proxy_set_header    Connection          $connection_upgrade;
          proxy_set_header    Upgrade             $http_upgrade;
          proxy_set_header    Host                $host;
          proxy_set_header    X-Real-IP           $remote_addr;
          proxy_set_header    X-Forwarded-For     $proxy_add_x_forwarded_for;
      }
     

      access_log    /var/log/nginx/access.log main;

      client_header_timeout 60;
      client_max_body_size 10M;
      client_body_timeout   60;
      keepalive_timeout     60;
      gzip                  off;
      gzip_comp_level       4;

      # Include the Elastic Beanstalk generated locations
      include conf.d/elasticbeanstalk/01_static.conf;
      include conf.d/elasticbeanstalk/healthd.conf;
  }
}

Nginx has a configuration file by default located in /etc/nginx/nginx.conf. This file has a lot of default properties for all requests and one of these is client_max_body_size. The default value for that property is 1MB.

in the file I am updating the client_max_body_size to 10MB, but the cors error when I send a file larger than 1 MB still persists:

Access to XMLHttpRequest at 'https://dominio.com/api' from origin 'https://www.dominio.frontend.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS configuration in spring: enter image description here

The application works fine in production except when I use a field to add files larger than 1MB, at which point it generates the CORS error.

None of this has solved the problem. What am I missing here?

Thanks so much for any help!

Answer 1

you should configure CORS in your Spring application.

1. Create a @Configuration class implementing WebMvConfigurer interface

2. Override method addCorsMappings(), like sample below, which allow all methods, all origins and apply to all API, aka: Global CORS configuration.

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedMethods("*");
    }
}

See the guide below if you want to apply selectively to specific APIs

Ref: https://spring.io/guides/gs/rest-service-cors/