flask_cors is registered but still getting CORS error

Question

I have a Vue frontend that uses Axios to POST to my Flask API. I've registered flask_cors to my Flask instance but I'm still get a CORS error.

flask_cors registered in app/__init__.py

from flask import Flask
from flask_sqlalchemy import SQLAlchemy
from flask_migrate import Migrate
from config import Config
from flask_marshmallow import Marshmallow
from flask_cors import CORS

app = Flask(__name__)
app.config.from_object(Config)
cors = CORS(app)
db = SQLAlchemy(app)
migrate = Migrate(app, db)
ma = Marshmallow(app)

from . import routes, models

app/routes.py

from flask import request, jsonify, current_app
from . import app, db
from .models import SetAnon

@app.route('/sets', methods=['POST'])
def sets():
    data = request.get_json()
    _set = SetAnon(
        col1=data['somedata']
    )
    db.session.add(_set)
    db.session.commit()
    return "set saved", 201

Vue frontend is making POST request with axios:

import axios from 'axios'

const API_URL = 'http://127.0.0.1:5000'

export function saveSet(set) {
  return axios.post(`${API_URL}/sets/`, set)
}

Getting this error in browser console

xhr.js?ec6c:172 OPTIONS http://127.0.0.1:5000/sets/ 404 (NOT FOUND)
Access to XMLHttpRequest at 'http://127.0.0.1:5000/sets/' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Answer 1

Looks like an issue with trailing backslash. Your routes.py defines the route as '/sets' however the frontend is calling '/sets/'.

Change the routes.py to this and it should work -

from flask import request, jsonify, current_app from . import app, db from .models import SetAnon

@app.route('/sets/', methods=['POST']) # Added trailing backslash
def sets():
    data = request.get_json()
    _set = SetAnon(
        col1=data['somedata']
    )
    db.session.add(_set)
    db.session.commit()
    return "set saved", 201