国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

Ajax與Flask傳值的跨域問(wèn)題

Betta / 2720人閱讀

摘要：前后端分離時(shí)關(guān)于前端數(shù)據(jù)時(shí)遇到的一個(gè)問(wèn)題在寫(xiě)一個(gè)報(bào)名提交的頁(yè)面前端組寫(xiě)了前端頁(yè)面但是沒(méi)有寫(xiě)后端的傳值本來(lái)想構(gòu)建結(jié)構(gòu)目錄但是想實(shí)現(xiàn)的形式可以控制提交時(shí)間段在不招新的時(shí)間關(guān)閉后端就打算分離開(kāi)表單提交的一開(kāi)始是這樣寫(xiě)的提交成功現(xiàn)在不迎新哦后端

前后端分離時(shí),關(guān)于前端Ajax-Post數(shù)據(jù)時(shí),遇到的一個(gè)問(wèn)題

在寫(xiě)一個(gè)報(bào)名提交的頁(yè)面,前端組寫(xiě)了前端頁(yè)面
但是沒(méi)有寫(xiě)后端的傳值,本來(lái)想構(gòu)建Flask結(jié)構(gòu)目錄
但是想實(shí)現(xiàn)API的形式,可以控制提交時(shí)間段-在不招新的時(shí)間關(guān)閉后端
就打算分離開(kāi),form表單提交的Post一開(kāi)始是這樣寫(xiě)的
$("form").submit(function(){
    var flagname  = isname();
    var flagphone = isphone();
    var flagclass = isclass();
    var flagemail = isemail();
    var flaggroup = isgroup();

    if(flagname == true && flagphone == true && flagclass == true 
        && flagemail == true && flaggroup == true){
        var data={
            InfoNmae:InfoName.value,
            InfoPho:InfoPho.value,
            InfoCls:InfoCls.value,
            InfoEmail:InfoEmail.value,
            InfoGroup:arr,
            InfoPower:InfoPower.value
        };
        $.ajax({
            type:"POST",
            url: "/joinus",
            data: JSON.stringify(data),
            dataType : "json",
            success:function(res){
                alert("提交成功");
            },
            error: function (res){
                var json_data=JSON.stringify(res);
                alert(json_data);
                // alert("現(xiàn)在不迎新哦~");
            },
        });
    }
    else {
        return false;
    }
})
后端是這樣
@app.route("/joinus",methods=["POST"])
def index():
    data=request.get_json(force=True)
    if data:
        print(data)
        return jsonify({"status":True})
    else:
        return jsonify({"status":False})

一開(kāi)始想的是,直接將url改為后端運(yùn)行的絕對(duì)路徑不行了
但是修改之后發(fā)現(xiàn),但是一直報(bào)500錯(cuò)誤,后來(lái)才知道是跨域問(wèn)題......

在網(wǎng)上找到了這種方法
第一種直接修改數(shù)據(jù)類(lèi)型為jsonp,采用GET方法,確實(shí)可行.....
        $.ajax({
            type:"POST",
            url: "http://127.0.0.1:5000/joinus",
            data: JSON.stringify(data),
            dataType : "jsonp",
            success:function(res){
                alert("提交成功");
            },
            error: function (res){
                var json_data=JSON.stringify(res);
                alert(json_data);
                // alert("現(xiàn)在不迎新哦~");
            },
        });
第二種就是在flask端加上響應(yīng)頭
但是上個(gè)鏈接中在用make_reponse()函數(shù)形成響應(yīng)頭時(shí)沒(méi)有將數(shù)據(jù)json化
還是報(bào)500錯(cuò)誤
@app.route("/api",methods=["POST"])
def index():
    data=request.get_json(force=True)
    if data:
        print(data)
        res = make_response(jsonify(data))
        res.headers["Access-Control-Allow-Origin"] = "*"
        res.headers["Access-Control-Allow-Methods"] = "POST"
        res.headers["Access-Control-Allow-Headers"] = "x-requested-with,content-type"
        return res
    else:
        return jsonify({"error":False})
第三種是應(yīng)用了flask集成的輪子
直接pip install flask_cors
from flask_cors import CORS

# r"/*" 是通配符，讓本服務(wù)器所有的 URL 都允許跨域請(qǐng)求
CORS(app, resources=r"/*")

@app.route("/joinus",methods=["GET","POST"])
def index():
    data=request.get_json(force=True)
    if data:
        print(data)
        return jsonify({"status": True})
    else:
        return jsonify({"status": False})
        $.ajax({
            type:"POST",
            crossDomain: true,
            url: "http://127.0.0.1:5000/joinus",
            data: JSON.stringify(data),
            dataType : "json",
            success:function(res){
                alert("提交成功");
            },
            error: function (res){
                var json_data=JSON.stringify(res);
                alert(json_data);
                // alert("現(xiàn)在不迎新哦~");
            },
        });
感覺(jué)第三種方便點(diǎn),第二種也不錯(cuò)
原文鏈接

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/41353.html

相關(guān)文章

  • 再也不學(xué)AJAX了！（三）跨域獲取資源 ② - JSONP & CORS

    摘要：瀏覽器的同源策略固然保障了互聯(lián)網(wǎng)世界的數(shù)據(jù)隱私與數(shù)據(jù)安全，但是如果當(dāng)我們需要使用跨域請(qǐng)求資源時(shí)，同源策略又會(huì)成為開(kāi)發(fā)者的阻礙。我們之前提到過(guò)，如果想要繞過(guò)瀏覽器同源策略，實(shí)現(xiàn)使用技術(shù)跨域獲取資源，需要服務(wù)端和客戶端的協(xié)同合作。 瀏覽器的同源策略固然保障了互聯(lián)網(wǎng)世界的數(shù)據(jù)隱私與數(shù)據(jù)安全，但是如果當(dāng)我們需要使用AJAX跨域請(qǐng)求資源時(shí)，同源策略又會(huì)成為開(kāi)發(fā)者的阻礙。在本文中，我們會(huì)簡(jiǎn)單介紹需...

    enda 評(píng)論0 收藏0

  • 前端常見(jiàn)跨域解決方案（全）

    摘要：需注意的是由于同源策略的限制，所讀取的為跨域請(qǐng)求接口所在域的，而非當(dāng)前頁(yè)。目前，所有瀏覽器都支持該功能需要使用對(duì)象來(lái)支持，也已經(jīng)成為主流的跨域解決方案。反向代理接口跨域跨域原理同源策略是瀏覽器的安全策略，不是協(xié)議的一部分。 什么是跨域？ 跨域是指一個(gè)域下的文檔或腳本試圖去請(qǐng)求另一個(gè)域下的資源，這里跨域是廣義的。 廣義的跨域： 1.) 資源跳轉(zhuǎn)： A鏈接、重定向、表單提交 2.) 資源...

    canger 評(píng)論0 收藏0

  • 九種跨域方式實(shí)現(xiàn)原理（完整版）

    摘要：二跨域解決方案原理利用標(biāo)簽沒(méi)有跨域限制的漏洞，網(wǎng)頁(yè)可以得到從其他來(lái)源動(dòng)態(tài)產(chǎn)生的數(shù)據(jù)。使用反向代理實(shí)現(xiàn)跨域，是最簡(jiǎn)單的跨域方式。 前言 前后端數(shù)據(jù)交互經(jīng)常會(huì)碰到請(qǐng)求跨域，什么是跨域，以及有哪幾種跨域方式，這是本文要探討的內(nèi)容。 本文完整的源代碼請(qǐng)猛戳github博客，紙上得來(lái)終覺(jué)淺，建議動(dòng)手敲敲代碼 一、什么是跨域？ 1.什么是同源策略及其限制內(nèi)容？ 同源策略是一種約定，它是瀏覽器最核心...

    edgardeng 評(píng)論0 收藏0

  • 九種跨域方式實(shí)現(xiàn)原理（完整版）

    摘要：二跨域解決方案原理利用標(biāo)簽沒(méi)有跨域限制的漏洞，網(wǎng)頁(yè)可以得到從其他來(lái)源動(dòng)態(tài)產(chǎn)生的數(shù)據(jù)。使用反向代理實(shí)現(xiàn)跨域，是最簡(jiǎn)單的跨域方式。 前言 前后端數(shù)據(jù)交互經(jīng)常會(huì)碰到請(qǐng)求跨域，什么是跨域，以及有哪幾種跨域方式，這是本文要探討的內(nèi)容。 本文完整的源代碼請(qǐng)猛戳github博客，紙上得來(lái)終覺(jué)淺，建議動(dòng)手敲敲代碼 一、什么是跨域？ 1.什么是同源策略及其限制內(nèi)容？ 同源策略是一種約定，它是瀏覽器最核心...

    justCoding 評(píng)論0 收藏0

  • 大話javascript 5期：跨域

    摘要：同源策略所謂同源是指協(xié)議，域名，端口均相同。同源策略是瀏覽器的一個(gè)安全功能，不同源的客戶端腳本在沒(méi)有明確授權(quán)的情況下，不能讀寫(xiě)對(duì)方資源。需注意的是由于同源策略的限制，所讀取的為跨域請(qǐng)求接口所在域的，而非當(dāng)前頁(yè)。 一、什么是跨域 1.URL解析 URL （Uniform Resource Locator ）統(tǒng)一資源定位符（URL）是用于完整地描述Internet上網(wǎng)頁(yè)和其他資源的地址的...

    jzzlee 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<