Ajax與Flask傳值的跨域問題

Betta 發(fā)布于2019-07-30 15:36 / 2724人閱讀

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

前后端分離時,關于前端Ajax-Post數(shù)據(jù)時,遇到的一個問題

在寫一個報名提交的頁面,前端組寫了前端頁面
但是沒有寫后端的傳值,本來想構建Flask結構目錄
但是想實現(xiàn)API的形式,可以控制提交時間段-在不招新的時間關閉后端
就打算分離開,form表單提交的Post一開始是這樣寫的

$("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})

一開始想的是,直接將url改為后端運行的絕對路徑不行了
但是修改之后發(fā)現(xiàn),但是一直報500錯誤,后來才知道是跨域問題......

在網(wǎng)上找到了這種方法
第一種直接修改數(shù)據(jù)類型為jsonp,采用GET方法,確實可行.....

        $.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端加上響應頭
但是上個鏈接中在用make_reponse()函數(shù)形成響應頭時沒有將數(shù)據(jù)json化
還是報500錯誤

@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})

第三種是應用了flask集成的輪子
直接pip install flask_cors

from flask_cors import CORS

# r"/*" 是通配符，讓本服務器所有的 URL 都允許跨域請求
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)在不迎新哦~");
            },
        });

感覺第三種方便點,第二種也不錯
原文鏈接

GPU云服務器云服務器導航控件傳值的問題 ajax jsonp跨域傳值 ajax請求跨域問題跨域傳值

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

轉載請注明本文地址：http://systransis.cn/yun/41353.html

再也不學AJAX了?。ㄈ?em>跨域獲取資源 ② - JSONP & CORS

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

enda 2019-08-21 17:55 評論0 收藏0
前端常見跨域解決方案（全）

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

canger 2019-07-25 15:04 評論0 收藏0
九種跨域方式實現(xiàn)原理（完整版）

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

edgardeng 2019-08-23 14:57 評論0 收藏0
九種跨域方式實現(xiàn)原理（完整版）

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

justCoding 2019-08-02 14:10 評論0 收藏0
大話javascript 5期：跨域

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

jzzlee 2019-08-23 16:42 評論0 收藏0