Configuring CORS with NGINX and AWS Elastic Beanstalk - amazon-web-services

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.
Create a #Configuration class implementing WebMvConfigurer interface
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/