以下のajax
のFlask
のリクエストの場合( フラスコ内のajaxから投稿されたデータをどのように使用できますか? ):
$.ajax({
url: "http://127.0.0.1:5000/foo",
type: "POST",
contentType: "application/json",
data: JSON.stringify({'inputVar': 1}),
success: function( data ) {
alert( "success" + data );
}
});
Cross Origin Resource Sharing (CORS)
エラーが表示されます:
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'null' is therefore not allowed access.
The response had HTTP status code 500.
次の2つの方法で解決しようとしましたが、どれもうまくいかないようです。
これは、Flask
を処理するためのCORS
拡張機能であり、クロスオリジンAJAXを可能にする必要があります。
このソリューションを使用する私のpythonServer.py:
from flask import Flask
from flask.ext.cors import CORS, cross_Origin
app = Flask(__name__)
cors = CORS(app, resources={r"/foo": {"origins": "*"}})
app.config['CORS_HEADERS'] = 'Content-Type'
@app.route('/foo', methods=['POST','OPTIONS'])
@cross_Origin(origin='*',headers=['Content-Type','Authorization'])
def foo():
return request.json['inputVar']
if __== '__main__':
app.run()
これは、officialFlaskコードスニペットで、装飾する関数でCORS
を許可するデコレータを定義します。
このソリューションを使用する私のpythonServer.py:
from flask import Flask, make_response, request, current_app
from datetime import timedelta
from functools import update_wrapper
app = Flask(__name__)
def crossdomain(Origin=None, methods=None, headers=None,
max_age=21600, attach_to_all=True,
automatic_options=True):
if methods is not None:
methods = ', '.join(sorted(x.upper() for x in methods))
if headers is not None and not isinstance(headers, basestring):
headers = ', '.join(x.upper() for x in headers)
if not isinstance(Origin, basestring):
Origin = ', '.join(Origin)
if isinstance(max_age, timedelta):
max_age = max_age.total_seconds()
def get_methods():
if methods is not None:
return methods
options_resp = current_app.make_default_options_response()
return options_resp.headers['allow']
def decorator(f):
def wrapped_function(*args, **kwargs):
if automatic_options and request.method == 'OPTIONS':
resp = current_app.make_default_options_response()
else:
resp = make_response(f(*args, **kwargs))
if not attach_to_all and request.method != 'OPTIONS':
return resp
h = resp.headers
h['Access-Control-Allow-Origin'] = Origin
h['Access-Control-Allow-Methods'] = get_methods()
h['Access-Control-Max-Age'] = str(max_age)
if headers is not None:
h['Access-Control-Allow-Headers'] = headers
return resp
f.provide_automatic_options = False
return update_wrapper(wrapped_function, f)
return decorator
@app.route('/foo', methods=['GET','POST','OPTIONS'])
@crossdomain(Origin="*")
def foo():
return request.json['inputVar']
if __== '__main__':
app.run()
それがなぜなのか、いくつか示していただけますか?
あなたのコードを少し修正した後、それはチャンピオンのように機能しました
# initialization
app = Flask(__name__)
app.config['SECRET_KEY'] = 'the quick brown fox jumps over the lazy dog'
app.config['CORS_HEADERS'] = 'Content-Type'
cors = CORS(app, resources={r"/foo": {"origins": "http://localhost:port"}})
@app.route('/foo', methods=['POST'])
@cross_Origin(origin='localhost',headers=['Content- Type','Authorization'])
def foo():
return request.json['inputVar']
if __== '__main__':
app.run()
*をlocalhostに置き換えました。多くのブログや投稿を読んでいるので、特定のドメインへのアクセスを許可する必要があります
次の簡単な方法で結果を取得できます。
@app.route('your route', methods=['GET'])
def yourMethod(params):
response = flask.jsonify({'some': 'data'})
response.headers.add('Access-Control-Allow-Origin', '*')
return response
まあ、私は同じ問題に直面しました。このページにアクセスできる新しいユーザー向け。公式のドキュメントに従ってください。
Flask-corsをインストールする
pip install -U flask-cors
アプリの初期化後、flask-cors
をデフォルト引数で初期化します:
from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route("/")
def helloWorld():
return "Hello, cross-Origin-world!"
Flask応答オブジェクトでAccess-Control-Allow-Origin
ヘッダーを設定することは多くの場合(この例のように)うまく設定できますが、静的アセットを提供する場合は効果がありません(少なくとも本番セットアップでは) )。これは、静的アセットがフロント向きのWebサーバー(通常はNginxまたはApache)によって直接提供されるためです。そのため、その場合は、FlaskではなくWebサーバーレベルで応答ヘッダーを設定する必要があります。
詳細については、しばらく前に書いたこの記事を参照してください ヘッダーの設定方法の説明 (私の場合、Font Awesomeアセットのクロスドメインサービングを実行しようとしていました)。
また、@ Satuが言ったように、JS AJAXリクエストの場合、特定のドメインにのみアクセスを許可する必要があるかもしれません。静的アセット(フォントファイルなど)を要求する場合、規則はそれほど厳しくなく、どのドメインへのアクセスの許可も受け入れられると思います。
これを答えにすることもできます。今日、私は同じ問題を抱えていましたが、予想以上に問題ではありませんでした。 CORS機能を追加した後、must Flaskサーバーを再起動します(ctrl + c
-> python manage.py runserver
、または使用する方法))コードが正しい場合でも変更を有効にします。そうしないと、CORSはアクティブなインスタンスで機能しません。
これは私にとってどのように見え、機能するかです(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"
})
Reactアプリconsole.logで:
Sending request:
GET /stuff
With parameters:
null
bundle.js:17316 Received data from Api:
{"stuff": "Here be stuff"}
私は Armin Ronacherによって提供された装飾 を少し変更して使用しました(クライアントから要求されたヘッダーが異なるため)。 (ここで、アプリケーション/ jsonタイプを要求するリクエスターとしてangularを使用します)。
コードは以下の場所でわずかに変更され、
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はapplication/jsonタイプを送信し、そうでない場合はtext/htmlになります。ヘッダーは、これらのヘッダーの私のケースリクエストでクライアントとして追加されます
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Access-Control-Allow-Origin':'*'
})
};
return this.http.post<any>(url, item,httpOptions)
注:cross_Originの配置は正しいはずで、依存関係がインストールされています。クライアント側では、消費するデータサーバーの種類を指定してください。たとえば、application/jsonまたはtext/html
私にとっては、以下に書かれたコードは魔法でした
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)
私は似たようなものと多くの苦労しました。以下を試してください:
それでも解決しない場合は、この記事をご覧ください。 PHP上にありますが、CORSが機能するためにどのヘッダーをどの値に設定する必要があるかを正確に説明しています。