Enable CORS in a Backbone client with a Flask server

Question

I want to do cross domain requests between my backbone app at 127.0.0.1 and and my Flask server at 127.0.0.1:5000. Before I switched to a Backbone I had an Ember.js app and I had the same problem. But I got it working by adding this in my Flask app:

@app.after_request
def after_request(data):
    response = make_response(data)
    response.headers['Content-Type'] = 'application/json'
    response.headers['Access-Control-Allow-Origin'] = 'http://localhost'
    return response

and configure the Ember RESTAdapter this way:

adapter: DS.RESTAdapter.create({ 
    url : 'http://127.0.0.1:5000',
    // In order to allow cross domain requests

    ajax: function(url, type, hash) {
       jQuery.ajax(url)
    }
  })
});

But this does not work with my Backbone application.

XMLHttpRequest cannot load http://127.0.0.1:5000/files. Request header field Content-Type is not allowed by Access-Control-Allow-Headers.

I guess I've to change some settings on the client side. But I don't know what. What do I've to do so that I am able to to do cross domain requests?

score 3 · Accepted Answer · answered Oct 16 '14 at 03:05

3

Here is what worked for me.

http://flask-cors.readthedocs.org/en/latest/

$ pip install -U flask-cors

from flask import Flask
from flask.ext.cors import CORS, cross_origin
app = Flask(__name__)
cors = CORS(app)
app.config['CORS_HEADERS'] = 'Content-Type'

@app.route("/")
@cross_origin()
def helloWorld():
  return "Hello, cross-origin-world!"

answered Oct 16 '14 at 03:05

Dan Rasmuson

5,705
5
29
45

I recently stumbled upon this plugin and this is a nicer more elegant solution. – OrangeTux Oct 16 '14 at 07:25

score 2 · Answer 2 · answered May 03 '13 at 08:34

2

I got it working by adding

response.headers['Access-Control-Allow-Headers'] = "Origin, X-Requested-With,Content-Type, Accept" to the after_request() method.

answered May 03 '13 at 08:34

OrangeTux

11,142
7
48
73

score 0 · Answer 3 · edited May 23 '17 at 12:24

0

For development you can:

Use Chrome extension - https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi
Start chrome in unsecured mode - https://stackoverflow.com/a/3177718/1104483

Or just set Access-Control-Allow-Origin to *

edited May 23 '17 at 12:24

Community

1
1

answered May 01 '13 at 16:03

Vitalii Petrychuk

14,035
8
51
55

Modifying the browser is not an option for production. And I've set the `Acces-Control-Allow-Origin` header already and it did not work. – OrangeTux May 03 '13 at 08:16
Dude, I have added `For development` special for you. Where have you found `production`? – Vitalii Petrychuk May 03 '13 at 09:28

Enable CORS in a Backbone client with a Flask server

3 Answers3