How to enable CORS with Flask-Restless

Question

I have an API for a postgres database created using Flask-Restless and served using Apache.

The API works perfectly until I try to use a javascript-based front-end to access the API when I receive multiple " CORS Error Access-Control-Allow-Origin" headers which seem to be closely related to the OPTIONS request.

I have attempted the following fixes

[1.Enable cors in apache][1]

 <VirtualHost *:80>
            Header add Access-Control-Allow-Origin "*"
            Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type, Authorization"
            Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
            ServerName localhost
            WSGIScriptAlias / /home/drmclean/bboxx/git/Smart-Solar-Server/SmartSolarServer.wsgi
            WSGIScriptReloading On

            <Directory /home/drmclean/bboxx/git/Smart-Solar-Server/>
                    Header add Access-Control-Allow-Origin "*"
                    Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type, Authorization"
                    Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
                    Require all granted
                    Order allow,deny
                    Allow from all
            </Directory>

            Alias /docs /home/drmclean/bboxx/git/Smart-Solar-Server/swagger
            <Directory /home/drmclean/bboxx/git/Smart-Solar-Server/swagger/>
                    Header add Access-Control-Allow-Origin "*"
                    Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type, Authorization"
                    Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"
                    Require all granted
                    Header set Access-Control-Allow-Origin "*"
                    Order allow,deny
                    Allow from all
            </Directory>
            ErrorLog ${APACHE_LOG_DIR}/error.log
            LogLevel warn
            CustomLog ${APACHE_LOG_DIR}/access.log combined
            <IfModule mod_rewrite.c>
                    RewriteEngine on
                    # Pass Authorization headers to an environment variable
                    RewriteCond %{HTTP:Authorization} ^(.*)
                    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
            </IfModule>

2.Enable CORS using the flask-cors extension

app = Flask(__name__, static_folder= paths.base_path+'/swagger/')
cors = CORS(app)

3.Enable CORS using flask-restless

def allow_control_headers(response):
response.headers['Access-Control-Allow-Origin'] = '*'
response.headers['Access-Control-Allow-Credentials'] = 'true'
return response

bp = manager.create_api(REDACTED)
bp.after_request(allow_control_headers)

Needless to say none have worked so far.

1. Doesn't remove the CORS warnings.
2. Appeared to remove the CORS error for some endpoints but not others, changing this to cors = CORS(app, response=r"/v1/*") brought back the CORS errors that had originally been removed.
3. Threw a syntax error as "bp has no attribute after_request" although I copied the syntax directly from the documentation. (here)

Can anyone explain,

1. Why the above fixes haven't removed the CORS issues.
2. How to resolve my issue and enable Cross-Origin-Resource-SHaring effectively?

Answer 1

Option 3 is closest, but the documentation you refer to is only for a specific version of Flask Restless that's not the latest. I'd suggest using Flask's after_this_request processor in combination with Flask Restless' preprocessor

def allow_control_headers(**kw):

    @after_this_request
    def add_headers(response):
        response.headers['Access-Control-Allow-Origin'] = '*'
        response.headers['Access-Control-Allow-Credentials'] = 'true'
        return response

bp = manager.create_api({
  ...
  'preprocessors: {'GET_SINGLE': [allow_control_headers]}
  ...
})