VueJS sending POST to Flask fails (CORS Request blocked)

Question

I've been following this vuejs guide and this flask guide to host my frontend and backend on a raspberry pi.

On my frontend I have this method, which sends an axios POST to the backend.

// path = http://127.0.0.1:5000/shift
// pin, port = 1-8 / SER1

sendByte(pin, port) {
  console.debug(`Setting ${pin} on ${port}`);
  // I'm adding the header to the payload directly
  const payload = {
    data: {
      pin,
      port
    },
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Content-Type": "application/json"
    }
  };
  console.debug(payload);
  axios.post(this.paths.shift, payload);
}

But the payload is not received on my backend (as in there isn't any payload in the uwsgi.log) and instead I get this error in console:

11:53:38.551 new-submission event fired Setup.vue:52
11:53:38.578 Watch-Handler for submissions fired (localStorage updated) Setup.vue:33
11:53:42.312 Setting 1 on SER1 Visualization.vue:83
11:53:42.313
Object { pin: 1, port: "SER1" }
Visualization.vue:85
11:53:45.151 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/shift. (Reason: CORS request did not succeed). 2
11:53:45.154 Error: Network Error createError.js:16
11:53:46.351 Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:5000/togglePort. (Reason: CORS request did not succeed). 2
11:53:46.353 Error: Network Error createError.js:16

As it is the most relevant in this error, here's my nginx.conf:

server {
    listen      80;
    server_name fire.com;
    charset utf-8;
    root    /var/www/fire-extinguish-visualizer/dist;
    index   index.html index.htm;    # Always serve index.html for any request
    location / {
        try_files $uri /index.html @fireFlask;
    }
    location /static {
        root /var/www/fire-extinguish-visualizer/dist/;
    }
    location @fireFlask {
        include uwsgi_params;
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' '*';
        # uwsgi_pass unix:/var/www/fire-extinguish-visualizer/server/uwsgi.sock;
        # uwsgi_pass 127.0.0.1:5000;
        uwsgi_pass uwsgi://localhost:5000;
    }
    error_log  /var/log/nginx/vue-app-error.log;
    access_log /var/log/nginx/vue-app-access.log;
}

I've tried numerous configurations and setups and I just can't get this to work.

After all those attempts I don't want to post each nginx.conf or uwsgi.ini I've tried, but for good measure my relevant files are in this gist.

My question is:

How is CORS properly setup on the SENDER and RECEIVER side to avoid this error?

From my understanding it's supposed to work when the following is done:

• Nginx adds CORS header to POST requests from hosted application
• uWSGI is configured correctly
• Flask application has CORS installed and allows cross-origin requests

What else is there? I'm simply puzzled by this cross-origin error by now.

When using http in the uwsgi.conf I can use curl to get the correct response:

pi@firepi:~ $ curl -X POST http://localhost:5000/togglePort -d '{"port":"SER1", "trigger":0}' -H 'Content-Type:
 application/json'
{"status":"success"}
pi@firepi:~ $ curl -X POST http://localhost:5000/shift -d '{"port":"SER1", "pin":1}' -H 'Content-Type: application/json'
{"status":"success"}

Trying a curl with headers and origin gives this:

pi@firepi:~ $ curl --include -X OPTIONS http://localhost:5000/togglePort -d '{"port":"SER1","trigger":0}' --header Access-Control-Request-Method:POST --header Access-Control-Request-Headers:Content-Type --header Origin:http://localhost:80
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Allow: OPTIONS, POST
Access-Control-Allow-Origin: http://localhost:80
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Methods: DELETE, GET, HEAD, OPTIONS, PATCH, POST, PUT
Vary: Origin
Content-Length: 0

I've also stumbled upon uwsgi-tools but don't really know how I can use uwsgi_curl to send specific CORS headers. That would help in troubleshooting this issue though, since I could narrow it down. Any ideas on that?

Answer 1

This problem occurred due to 3 false configurations in my code/configs.

Correction #1

As @Slytherin suggested in the comments, to make Nginx work properly I need to send the POST to the right port. In my Vue-App I had programmed to send the POST directly to the Flask-App, which results in an CORS Error because no appropriate Headers could be added by Nginx. I fixed it, by fixing the paths:

...
paths: {
        // This is a static Address. I later changed it to a hostname: firepi:80
        togglePort: "http://192.168.137.139:80/togglePort",
        shift: "http://192.168.137.139:80/shift"
      }
...

It should be noted that when using localhost as address that the Browser will actually point to itself. So if you're running your App on Server X and access it from PC A, the path of localhost will actually resolve in PC A and not in Server X. Because of that, a properly setup hostname is recommended.

Correction #2

Because my main error was happening in Problem 1 (Nginx Port), it was quite faulty to steadily look into Problem 2. (CORS-Configuration) To enable CORS, I needed to add the proper headers in the Nginx configuration and also needed to configure CORS in my Flask-App. For Flask I used the default by just using CORS(app).

In my special case I'm allowing all origins because this app is inside a local network, but you should definitly restrict such access when connecting your app to the internet.

Correction #3

Since I'm directing the app to an Address on Port 80, I needed to configure that link inside Nginx:

location /togglePort {
        include uwsgi_params;
        uwsgi_pass unix:/var/www/fire-extinguish-visualizer/server/app_uwsgi.sock;
}
location /shift {
        include uwsgi_params;
        uwsgi_pass unix:/var/www/fire-extinguish-visualizer/server/app_uwsgi.sock;
}