Search code examples
pythonangularjsflaskflask-restful

Flask CORS - no Access-control-allow-origin header present on a redirect()

I am implementing OAuth Twitter User-sign in (Flask API and Angular)

I keep getting the following error when I click the sign in with twitter button and a pop up window opens:

XMLHttpRequest cannot load https://api.twitter.com/oauth/authenticate?oauth_token=r-euFwAAAAAAgJsmAAABTp8VCiE. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

I am using the python-Cors packages to handle CORS, and I already have instagram sign in working correctly. I believe it has something to do with the response being a redirect but have not been able to correct the problem.

My flask code looks like this:

app = Flask(__name__, static_url_path='', static_folder=client_path)
cors = CORS(app, allow_headers='Content-Type', CORS_SEND_WILDCARD=True)
app.config.from_object('config')

@app.route('/auth/twitter', methods=['POST','OPTIONS'])
@cross_origin(origins='*', send_wildcard=True)
#@crossdomain(origin='')
def twitter():
    request_token_url = 'https://api.twitter.com/oauth/request_token'
    access_token_url = 'https://api.twitter.com/oauth/access_token'
    authenticate_url = 'https://api.twitter.com/oauth/authenticate'

    # print request.headers

    if request.args.get('oauth_token') and request.args.get('oauth_verifier'):
        -- omitted for brevity --
    else:
        oauth = OAuth1(app.config['TWITTER_CONSUMER_KEY'],
                       client_secret=app.config['TWITTER_CONSUMER_SECRET'],
                       callback_uri=app.config['TWITTER_CALLBACK_URL'])
        r = requests.post(request_token_url, auth=oauth)
        oauth_token = dict(parse_qsl(r.text))
        qs = urlencode(dict(oauth_token=oauth_token['oauth_token']))
        return redirect(authenticate_url + '?' + qs)
Solution

  • The problem is not yours. Your client-side application is sending requests to Twitter, so it isn't you that need to support CORS, it is Twitter. But the Twitter API does not currently support CORS, which effectively means that you cannot talk to it directly from the browser.

    A common practice to avoid this problem is to have your client-side app send the authentication requests to a server of your own (such as this same Flask application that you have), and in turn the server connects to the Twitter API. Since the server side isn't bound to the CORS requirements there is no problem.

    In case you want some ideas, I have written a blog article on doing this type of authentication flow for Facebook and Twitter: http://blog.miguelgrinberg.com/post/oauth-authentication-with-flask