CORS problem with Angularjs + Spring-boot + nginx - angularjs

Question

So I have been pulling my hair out for a couple of days now. I have a backend server, using Spring-boot with Rest API
This server is called from a frontend interface using AngularJS, also handled by Nginx.
Everything is running locally. Whenever I try to make a request from the fronted to the backend, I get the following error:
I know what you think: Easy, just add add_header 'Access-Control-Allow-Origin' 'http://[MY_IP]'; to your nginx.conf file on the backend, and everything will work, like here. or here.
But it doesn't. I tried everything, moving it to different locations, putting a '*' instead of the address, enabling and disabling SSL... The only thing that works is when I manually disable Cross-Origin restrictions in the browser. And the best part is that when I do disable those restrictions, I can see the Access-Control-Allow-Origin header set to http://[MY_IP] in the debug console of my browser!
Any idea of what might be going wrong?
Here is my nginx.conf file:
user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;
# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;
events {
worker_connections 1024;
}
http {
log_format main '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for"';
access_log /var/log/nginx/access.log main;
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
include /etc/nginx/mime.types;
default_type application/octet-stream;
# Load modular configuration files from the /etc/nginx/conf.d directory.
# See http://nginx.org/en/docs/ngx_core_module.html#include
# for more information.
include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*;
}
Here is my /etc/nginx/sites-enabled/default.conf file:
upstream backend_api {
server 10.34.18.2:8080;
}
server {
listen 80 default_server;
listen [::]:80 default_server;
server_name _;
root /var/www/html/;
index index.html;
client_max_body_size 5M;
location /todos {
access_log /var/log/nginx/todos.backend.access.log;
error_log /var/log/nginx/todos.backend.error.log;
proxy_set_header HOST $host;
proxy_set_header X-Forwarded-Proto $scheme;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_pass http://backend_api;
}
location / {
access_log /var/log/nginx/todos.frontend.access.log;
error_log /var/log/nginx/todos.frontend.error.log;
try_files $uri $uri/ =404;
}
}
I create a symbolic link:
ln -s /etc/nginx/sites-available/default /etc/nginx/sites-enabled/

Answer 1

I am not sure if this will make the cors work, but it may help getting near to the solution:
Access-Control-Allow-Origin: http://[MY_IP] is not the only header you need to take care of.
As the Content-Type is application/json and also, you are not using non simple headers, you will also have to give specific permission to Content-Type header, the same with Accept-Encoding and DNT
Access-Control-Allow-Headers: Content-Type, Accept-Encoding, DNT
I am not sure about this one for this specific GET, but in any case also the allowed methods:
Access-Control-Allow-Methods: GET
And if you are sending cookies, authorization header, or cliente certificates for authentication:
Access-Control-Allow-Credentials: true
I don't think it is your current case, but please note that returning Access-Control-Allow-Credentials: true and blindly replicating the received Origin in the Access-Control-Allow-Origin response, enables any site to access your server impersonating the owner of the credentials.
And just in case you are tempted, ACAO: * with ACAC: true will not work as per specification.
You may also have to take care of the OPTIONS method called during a cors preflight which shold be in line with what the actual call will respond.
And remember that not returning one of these headers is the way to deny it.
Ref: CORS - MDN