Rozwiązanie Cross Origin Resource Sharing with Flask

Możesz uzyskać wyniki za pomocą prostego:

@app.route('your route', methods=['GET'])
def yourMethod(params):
    response = flask.jsonify({'some': 'data'})
    response.headers.add('Access-Control-Allow-Origin', '*')
    return response

Cóż, stanąłem przed tym samym problemem. Dla nowych użytkowników, którzy mogą wylądować na tej stronie. Po prostu postępuj zgodnie z ich oficjalną dokumentacją.

Install flask-cors

pip install -U flask-cors

Następnie po inicjalizacji aplikacji inicjalizuj flask-cors z domyślnymi argumentami:

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

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

Równie dobrze może to być odpowiedź. Miałem ten sam problem dzisiaj i to było bardziej nie-problem niż oczekiwano. Po dodaniu funkcji CORS, musisz ponownie uruchomić serwer Flask (ctrl + c -> python manage.py runserver, lub którąkolwiek z metod)), aby zmiana weszła w życie, nawet jeśli kod jest poprawny. W przeciwnym razie CORS nie będzie działać w aktywnej instancji.

Oto Jak to dla mnie wygląda i działa (Python 3.6.1, Flask 0.12):

Factory.py : {]}

from flask import Flask
from flask_cors import CORS  # This is the magic


def create_app(register_stuffs=True):
    """Configure the app and views"""
    app = Flask(__name__)
    CORS(app)  # This makes the CORS feature cover all routes in the app

    if register_stuffs:
        register_views(app)
    return app


def register_views(app):
    """Setup the base routes for various features."""
    from backend.apps.api.views import ApiView
    ApiView.register(app, route_base="/api/v1.0/")

Views.py : {]}

from flask import jsonify
from flask_classy import FlaskView, route


class ApiView(FlaskView):
    @route("/", methods=["GET"])
    def index(self):
        return "API v1.0"

    @route("/stuff", methods=["GET", "POST"])
    def news(self):
        return jsonify({
            "stuff": "Here be stuff"
        })

W mojej konsoli aplikacji React.log:

Sending request:
GET /stuff
With parameters:
null
bundle.js:17316 Received data from Api:
{"stuff": "Here be stuff"}

Zauważ, że ustawienie nagłówka Access-Control-Allow-Origin w obiekcie odpowiedzi Flask jest w wielu przypadkach dobre (np. ten), ale nie ma żadnego wpływu na obsługę zasobów statycznych (przynajmniej w konfiguracji produkcyjnej). Dzieje się tak dlatego, że zasoby statyczne są obsługiwane bezpośrednio przez frontowy serwer WWW (zwykle Nginx lub Apache). W takim przypadku musisz ustawić nagłówek odpowiedzi na poziomie serwera www, a nie w Flask.

Aby uzyskać więcej szczegółów, zobacz ten artykuł, który napisałem jakiś czas temu, wyjaśniając, jak ustawić nagłówki (w moim przypadku próbowałem obsługiwać zasoby Font Awesome w różnych domenach).

Również, jak powiedział @Satu, może być konieczne zezwolenie dostępu tylko dla określonej domeny, w przypadku żądań JS AJAX. W przypadku żądania zasobów statycznych (takich jak pliki czcionek), myślę, że reguły są mniej rygorystyczne, a Zezwolenie na dostęp dla dowolnej domeny jest bardziej akceptowane.

Użyłem dekoratora podanego przez Armina Ronachera z niewielkimi modyfikacjami (z powodu różnych nagłówków, które są wymagane przez Klienta).I to mi pomogło. (gdzie używam angular jako requester requesting application / json type).

Kod jest nieco zmodyfikowany w poniższych miejscach,

from flask import jsonify

@app.route('/my_service', methods=['POST', 'GET','OPTIONS'])
@crossdomain(origin='*',headers=['access-control-allow-origin','Content-Type'])
def my_service():
    return jsonify(foo='cross domain ftw')

Jsonify wyśle typ aplikacji / json, w przeciwnym razie będzie to tekst / html. nagłówki są dodawane jako klient w moim przypadku żądanie dla tych nagłówków

 const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type': 'application/json',
        'Access-Control-Allow-Origin':'*'
      })
    };
    return this.http.post<any>(url, item,httpOptions)

Mogę się spóźnić na to pytanie, ale poniżej kroków Naprawiono problem

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

Uwaga: umieszczenie cross_origin powinno być prawidłowe i zainstalowane są zależności. Po stronie klienta, upewnij się, aby określić rodzaj serwera danych jest zużywa. Na przykład application/json lub text / html

Dla mnie kod napisany poniżej zrobił magię

from flask import Flask,request,jsonify
from flask_cors import CORS,cross_origin
app=Flask(__name__)
CORS(app, support_credentials=True)
@app.route('/api/test', methods=['POST', 'GET','OPTIONS'])
@cross_origin(supports_credentials=True)
def index():
    if(request.method=='POST'):
     some_json=request.get_json()
     return jsonify({"key":some_json})
    else:
        return jsonify({"GET":"GET"})


if __name__=="__main__":
    app.run(host='0.0.0.0', port=5000)

Walczyłem z czymś podobnym. Spróbuj:

1. Użyj wtyczki do przeglądarki, która może wyświetlać nagłówki HTML.
2. Wprowadź adres URL do usługi i wyświetl zwrócone wartości nagłówka.
3. Upewnij się, że Access-Control-Allow-Origin jest ustawione na jedną i tylko jedną domenę, która powinna być request origin. Nie ustawiaj Access-Control-Allow-Origin na *.

Jeśli to nie pomoże, spójrz na ten artykuł. Jest na PHP, ale opisuje dokładnie, które nagłówki muszą być ustawione, na które wartości mają działać CORS.

CORS, który działa w IE, Firefox, Chrome i Safari