CORS problem on production (FLASK on docker, VUE static, NGINX)

Question

All is working Ok on develop (tipical)

I have flask app (API) docker, postgres docker and VUE app (FRONT).

Deployed on production (AWS instance with nginx). Flask-api working on with UWSGI listening on socket and redirected from nginx conf from /api route. VUE is deployed as static content after npm run build and listening on /.

When entering on / vue shows a login form, after post user/password I got this errors.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost/api/login. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200. Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost/api/login. (Reason: CORS request did not succeed). Status code: (null).

OPTIONS REQUEST

OPTIONS /api/login HTTP/1.1
Host: localhost
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:100.0) Gecko/20100101 Firefox/100.0
Accept: */*
Accept-Language: en,es-ES;q=0.8,en-US;q=0.5,es;q=0.3
Accept-Encoding: gzip, deflate, br
Access-Control-Request-Method: POST
Access-Control-Request-Headers: authorization,content-type
Referer: http://sample.com/
Origin: http://sample.com
Connection: keep-alive
Sec-Fetch-Dest: empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site: cross-site

OPTIONS response

HTTP/1.1 200 OK
Date: Fri, 13 May 2022 14:18:21 GMT
Server: Apache/2.4.29 (Ubuntu)
Allow: GET,POST,OPTIONS,HEAD
Content-Length: 0
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive

I am using flask-cors on the api.

from flask_cors import CORS, cross_origin
cors = CORS(app, resources={r"/*": {"origins": "*"}})

And is deployed with UWSGI

[uwsgi]
manage-script-name = true
mount=/api=api.py
processes = 1
threads = 1
master = true
socket = api.sock
chmod-socket = 666
vacuum = true
die-on-term = true

nginx is configured like this (sites-available).

server {
    listen 80;
    server_name xxx.com;

        add_header "Access-Control-Allow-Origin"  * always;
        add_header "Access-Control-Allow-Methods" "GET, POST, OPTIONS, HEAD";
        add_header "Access-Control-Allow-Headers" "Authorization, Origin, X-Requested-With, Content-Type, Accept";

    location / {
        root /home/ubuntu/xxx/dashboard/static;
    }
    location /api {
        include uwsgi_params;
        uwsgi_pass unix:///home/ubuntu/xxx/api/api.sock;
    }
}

Tried to move add_header everywhere.

More:

• Api is working from outside the server correctly.
• Front appears to work ok but cant reach backend api
• Tried all solutions listed on stackoverflow.
• In local I have 3 dockers working correctly and no CORS problem.

Answer 1

Finally found a solution.

• Vue config was using a bad url (localhost). Changed to xxx.com/api
• Moved front to a new subdomain (api.xxx.com)
• Added the two domains as separated servers to nginx.conf.
• Flask-CORS was adding double headers and causing errors with CORS. Removed flask CORS and added headers on nginx.conf.
• Using a CORS plugin on the navigator to avoid CORS local problems.