2017-06-05 33 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