javascript - 使用 flask 和 ajax 的跨源问题

Question

我遇到了“跨源请求被阻止”的一些问题。我试图首先允许来自服务器，而不是来自所有 ("*")。每次在 chrome 开发人员工具包上收到相同的错误消息。

这是我的 flask python 代码:

application = Flask(__name__)
application.config.from_object(__name__)
cors = CORS(application, resorces={r'/*': {"origins": '*'}})

@application.route("/get-live-data",methods=['GET'])
@cross_origin()
def live_data():
    con = connect_db()
    cur = con.cursor()
    cur.execute("SELECT * from envoiContinuT")
    sqlite_result = cur.fetchall()
    cle = json.load(open(JSON_STATUS))
    parametres = json.load(open(JSON_PARAMETRES))
    descT = []
    for key in cle["status"]:
        attr = parametres[key]
        if attr["envoiC"] == 1:
            descT.append(attr["description"])
    response = any_response(flask.jsonify(data=descT))
    return response

这是我的 Ajax 代码:

var baseURL = "http://localhost:8000";

function getLiveData(data){
    //Get the parameters descriptions
    $.ajax({
        method: 'GET',
        url:baseURL + '/get-live-data',
        headers: {
            "Accept" : "application/json",
            "Content-type": "application/json"
        },
        success:function(data){
                console.log(data);
                //populateAccordion(data);    
        },

        error: function(XMLHttpRequest, textStatus, errorThrown) { 
            console.log("Status: " + textStatus); 
            console.log("Error: " + errorThrown); 
            } 
    });
}

谢谢您的回答!

Answer 1

这里有错字:

cors = CORS(application, resorces={r'/*': {"origins": '*'}})
                         ^^^^^^^^

应该是:

cors = CORS(application, resources={r'/*': {"origins": '*'}})

此外，为GET 请求 发送Content-type 请求 header 是没有意义的。 GET 请求没有请求体，因此无需指定内容类型。因此，只需这样做:

headers: {
    "Accept" : "application/json",
},

否则，如果您发送一个值为application/json 的Content-Type 请求 header ，这会触发您的浏览器执行CORS preflight OPTIONS request。 ，并且您的配置必须允许它:

@application.route("/get-live-data",methods=['GET', 'POST'])
@cross_origin(headers=['Content-Type']) # Send Access-Control-Allow-Headers

但是如果您允许 Content-Type 请求 header ，您也可以允许 POST 请求(如上所述)——因为如前所述，没有意义仅允许 GET 请求。