HTTP request blocked by CORS for not having Access-Control-Allow-Origin header but the header is present

Question

I am using Python with Flask and have created a REST api, I need my Vue app to interact with it and get data, but I get No 'Access-Control-Allow-Origin' header is present.

I am adding that header from nginx (so i can proxy the API as development server does not have any option to allow cross-origin access) I've tried to use jQuery instead of vue-resource and that worked.

nginx config:

server {
 listen 5089;
 access_log off;
 error_log /dev/null crit;
 location / {
     add_header 'Access-Control-Allow-Headers' 'content-type';
     add_header 'Access-Control-Allow-Origin' '*';
     proxy_pass http://localhost:5000;
     proxy_read_timeout  90;
 }
}

Vue Component:

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/" class="btn-dark">Home</router-link>
      |
      <router-link to="/about">About</router-link>
    </div>
    <label>User ID:
      <input type="text" v-model="auth.id" required/>
    </label>
    <label>
      Password:
      <input type="text" v-model="auth.password"/>
    </label>
    <button v-on:click.prevent="getToken">Submit</button>
  </div>
</template>
<script>
export default {
  data () {
    return {
      auth: {
        id: '',
        password: ''
      }
    }
  },
  methods: {
    getToken: function (token) {
      this.$http.post('http://localhost:5089/auth', {
        UID: this.auth.id,
        pass: this.auth.password
      }).then(function (data) {
        console.log(data)
      })
    }
  }
}
</script>

API route code:

@app.route('/auth', methods=['POST'])
def authenticate():
    print(request.form)
    for data in request.form:
        try:
            jsonParsed = json.loads(data)
            id = jsonParsed['UID']
            allegedPass = jsonParsed['pass']
        except Exception:
            return jsonify({
                'message': 'Oopsie Whoopsie what a nice cat, look'
            })
    if id and allegedPass:
        authFile = open('auth.json', 'r')
        authData = json.load(authFile)
        authFile.close()
        try:
            hashedPass = authData[str(id)]['pass']
        except Exception:
            return jsonify({
                'message': 'Oopsie Whoopsie look, a foxie'
            })
        if hashedPass == allegedPass:
            token = jwt.encode({'id': id, 'pass': allegedPass, 'exp': datetime.utcnow() + timedelta(minutes=15)},
                               app.config['secret'])
            return jsonify({
                'token': token.decode('UTF-8')
            })
        else:
            return jsonify({
                'message': 'GTFO'
            })
    else:
        return jsonify({
            'message': 'Kill yourself already.'
        })

It should send a token back to the App but instead I get the following error in console:

POST http://localhost:5089/auth 500 (INTERNAL SERVER ERROR)
Access to XMLHttpRequest at 'http://localhost:5089/auth' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

On the API terminal I get:

127.0.0.1 - - [06/Apr/2019 09:24:13] "OPTIONS /auth HTTP/1.0" 200 -
ImmutableMultiDict([])
127.0.0.1 - - [06/Apr/2019 09:24:13] "POST /auth HTTP/1.0" 500 -

Traceback (most recent call last):
.
.
.
File "/home/sids/Projects/laboratory/py/server.py", line 58, in authenticate
    if id and allegedPass:
UnboundLocalError: local variable 'id' referenced before assignment

Answer 1

It turns out that the vue-resource module was not sending data properly or it was not being received properly; so when I was trying to parse the request form, there was an error which caused the issue and the browser presumed that the Origin was blocked despite knowing otherwise; however, I am using jQuery now; that works