2017-06-05 8 views
0

私はRESTful APIについて研究しています。テストする小さなサーバーとコンシューマを作成することにしました。RESTful API - Flask - > Jquery - エラー

私はサーバーとしてFlaskを使用していますが、私はこのAPIを消費するためにインターネットを利用しました。しかし、私はいくつか問題があります。

コンソール上のエラーメッセージは、この意見:XMLHttpRequest cannot load http://127.0.0.1:5000/api/tasks. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

をしかし、私はそれができるかわかりません。

フラスコサーバコード:jqueryのを使用して

from flask import Flask, jsonify 

app = Flask(__name__) 

tasks = [ 
    { 
     'id':1, 
     'title': u'Estudo', 
     'description': u'Sistemas Distribuidos', 
     'done':True 
    }, 
    { 
     'id':2, 
     'title': u'Monitoria', 
     'description': u'Programacao e Algoritmos', 
     'done': False 
    } 
] 


@app.route('/') 
def index(): 
    return "URL PARA O ACESSO DA API: '/api/tasks'" 

@app.route('/api/tasks', methods=['GET']) 
def get_tasks(): 
    return jsonify({'tasks': tasks}) 

if __name__ == '__main__': 
    app.run(debug=True) 

例コード:

<!DOCTYPE html> 
<html> 
<head> 
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <meta charset="utf-8"> 
    <title>Mashape Query</title> 
    <script> 
    function doIt() { 
var output = $.ajax({ 
    url: 'http://127.0.0.1:5000/api/tasks', // The URL to the API. You can get this by clicking on "Show CURL example" from an API profile 
    type: 'GET', // The HTTP Method, can be GET POST PUT DELETE etc 
    data: {}, // Additional parameters here 
    dataType: 'json', 
    success: function(data) { 
     //console.log(data); 
     alert(data); 
     document.getElementById("output").innerHTML = data.source; 
     }, 
    error: function(err) { alert(err.getText); } 
}); 


} 

</script> 
</head> 
<body> 

    <button onclick="doIt()">Run the request</button> 
    <div id="output">The API request is:</div> 

</body> 
</html> 

答えて

0

ほとんどの場合、最も簡単なのhttps://flask-cors.readthedocs.io/en/latest/をインストールすることです。そのSimple Usageガイドから

from flask import Flask 
from flask_cors import CORS, cross_origin 

app = Flask(__name__) 
CORS(app) 

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

あなたが別のパッケージをインストールしたくない場合は、ここでhttps://stackoverflow.com/a/33091782/2525104サルバドールダリからソリューションを使用しようとすることができます。

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