CORS Request blocked error - Current conf files

application.py

from flask import Flask, jsonify, request
from flask_cors import CORS, cross_origin
import RPi.GPIO as GPIO
from time import sleep

"""
...
some variables/code here, irrelevant to the error
omitted to keep file readable
...
"""

app = Flask(__name__)
# From what I've read this should suffice to allow all cross origin requests
cors = CORS(application, resources={r"/*": {"origins": "*"}})

@app.route('/togglePort', methods=['POST'])
# Instead of the resources dictionary this directive could be used to allow cross origin on specific routes
@cross_origin()
def togglePort():
    response = {'status': 'success'}
    if request.method == 'POST':
        data = request.get_json()
        GPIO.output(ports[data['port']]['G'], data['trigger'])
    return jsonify(response)


@app.route('/shift', methods=['POST'])
@cross_origin()
def shift():
    response = {'status': 'success'}
    if request.method == 'POST':
        data = request.get_json()
        pinStates[data['port']][len(pinStates[data['port']]) - data['pin']] ^= 1
        for val in pinStates[data['port']]:
            GPIO.output(ports[data['port']]['SERIN'], val)
            sleep(0.02)
            GPIO.output(ports[data['port']]['SRCK'], GPIO.HIGH)
            sleep(0.02)
            GPIO.output(ports[data['port']]['SRCK'], GPIO.LOW)
        GPIO.output(ports[data['port']]['RCK'], GPIO.HIGH)
        sleep(0.02)
        GPIO.output(ports[data['port']]['RCK'], GPIO.LOW)
    return jsonify(response)


if __name__ == '__main__':
    try:
        app.run(host="127.0.0.1", port="5000")
    except Exception as e:
        print(e)
        GPIO.cleanup()
    GPIO.cleanup()

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;
}

uwsgi.ini

[uwsgi]
# variables
base = /var/www
project = fire-extinguish-visualizer

# general settings
master = True

# change directory before loading
chdir=%(base)/%(project)
module = application:application


# python stuff
virtualenv = %(chdir)/server/env
pythonpath = %(chdir)/server/
pythonpath = %(chdir)/server/lib/python3.7/site-packages

# socket file settings
# I've tried to use uwsgi-socket as well as http socket. They both give the same CORS error.
# With http enabled though I at least can send a request via curl, which proved that my function would work if it received the data
#uwsgi-socket = %(base)/%(project)/server/%n.sock
#http = 127.0.0.1:5000
uid = www-data
gid = gpio
chmod-socket = 644
chown-socket = www-data:www-data

# log files
logto = /var/log/uwsgi/%n.log

Visualization.vue

// This is the Vue Component that is sending the request
// The request is sent from the method sendByte
// A request is also sent upon loading the component
<template>
  <div id="content">
    <p v-for="visual in visuals" :key="visual.port.name" class="port">
      <b>{{ visual.description }}</b>
      <br />
      {{ `BoardType: ${visual.board.boardType}` }}
      <br />
      {{ `PortID: ${visual.port.id}` }}
      <br />
      {{ `PortName: ${visual.port.name}` }}
      <br />
      <button
        v-for="(io, index) in visual.IO"
        :key="index"
        @click="sendByte(io, visual.port.name)"
      >{{ `${index}: ${visual.board.boardType.toUpperCase()}-${io}` }}</button>
    </p>
    <div class="counters" v-for="counter in counters" :key="counter.id">
      <button
        @click="switchCountdown(`vac${counter.id}`, counter.id)"
        v-text="`Toggle ${counter.name} -> ${counter.state}`"
      />
      <vac :ref="`vac${counter.id}`" :leftTime="counter.seconds*1000" :autoStart="false">
        <span slot="process" slot-scope="{ timeObj }">{{ timeObj.ceil.s }}</span>
        <span slot="finish">Done!</span>
      </vac>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Visualization",
  components: {},
  data() {
    return {
      visuals: [],
      counters: [],
      paths: {
      // I've tried setting the paths to the following addresses as well:
      // http://127.0.0.1:5000
      // http://0.0.0.0:5000
        togglePort: "http://192.168.137.139:5000/togglePort",
        shift: "http://192.168.137.139:5000/shift"
      }
    };
  },
  mounted() {
    if (localStorage.getItem("submissions")) {
      try {
        this.visuals = JSON.parse(localStorage.getItem("submissions"));
        this.visuals.forEach(visual => {
          const payload = {
            data: {
              port: visual.port.name,
              trigger: 0
            },
            header: {
              "Access-Control-Allow-Origin": "*",
              "Content-Type": "application/json"
            }
          };
          axios.post(this.paths.togglePort, payload);
        });
      } catch (e) {
        // NOTE Destroy data if invalid
        console.debug(e);
        localStorage.removeItem("submissions");
      }
    }
    if (localStorage.getItem("delays")) {
      try {
        this.counters = JSON.parse(localStorage.getItem("delays"));
      } catch (e) {
        console.debug(e);
        localStorage.removeItem("delays");
      }
    }
  },
  beforeDestroy() {
    this.visuals.forEach(visual => {
      const payload = {
        port: visual.port.name,
        trigger: 1
      };
      axios.post(this.paths.togglePort, payload);
    });
  },
  methods: {
    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);
    },
    switchCountdown(ref, id) {
      // console.debug(this.$refs[ref][0])
      this.$refs[ref][0].switchCountdown();
      this.$nextTick(() => {
        this.counters[id - 1].state =
          this.$refs[ref][0].state === "stoped" ? "On" : "Off";
      });
    }
  }
};
</script>

<style lang="scss" scoped>
/*** EXAMPLE ***/
#content {
  width: 100%;
}
.port {
  box-sizing: border-box;
  width: fit-content;
  border: 1px dashed red;
  box-align: center;
}
</style>