Ajax与Flask传值的跨域问题

Betta 发布于2019-07-30 15:36 / 2744人阅读

摘要：前后端分离时关于前端数据时遇到的一个问题在写一个报名提交的页面前端组写了前端页面但是没有写后端的传值本来想构建结构目录但是想实现的形式可以控制提交时间段在不招新的时间关闭后端就打算分离开表单提交的一开始是这样写的提交成功现在不迎新哦后端

前后端分离时,关于前端Ajax-Post数据时,遇到的一个问题

在写一个报名提交的页面,前端组写了前端页面
但是没有写后端的传值,本来想构建Flask结构目录
但是想实现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("现在不迎新哦~");
            },
        });
    }
    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改为后端运行的绝对路径不行了
但是修改之后发现,但是一直报500错误,后来才知道是跨域问题......

在网上找到了这种方法
第一种直接修改数据类型为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("现在不迎新哦~");
            },
        });

第二种就是在flask端加上响应头
但是上个链接中在用make_reponse()函数形成响应头时没有将数据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("现在不迎新哦~");
            },
        });

感觉第三种方便点,第二种也不错
原文链接

云服务器 GPU云服务器导航控件传值的问题 ajax jsonp跨域传值 ajax请求跨域问题跨域传值

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/41353.html

再也不学AJAX了！（三）跨域获取资源 ② - JSONP & CORS

摘要：浏览器的同源策略固然保障了互联网世界的数据隐私与数据安全，但是如果当我们需要使用跨域请求资源时，同源策略又会成为开发者的阻碍。我们之前提到过，如果想要绕过浏览器同源策略，实现使用技术跨域获取资源，需要服务端和客户端的协同合作。浏览器的同源策略固然保障了互联网世界的数据隐私与数据安全，但是如果当我们需要使用AJAX跨域请求资源时，同源策略又会成为开发者的阻碍。在本文中，我们会简单介绍需...

enda 2019-08-21 17:55 评论0 收藏0
前端常见跨域解决方案（全）

摘要：需注意的是由于同源策略的限制，所读取的为跨域请求接口所在域的，而非当前页。目前，所有浏览器都支持该功能需要使用对象来支持，也已经成为主流的跨域解决方案。反向代理接口跨域跨域原理同源策略是浏览器的安全策略，不是协议的一部分。什么是跨域？跨域是指一个域下的文档或脚本试图去请求另一个域下的资源，这里跨域是广义的。广义的跨域： 1.) 资源跳转： A链接、重定向、表单提交 2.) 资源...

canger 2019-07-25 15:04 评论0 收藏0
九种跨域方式实现原理（完整版）

摘要：二跨域解决方案原理利用标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的数据。使用反向代理实现跨域，是最简单的跨域方式。前言前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。本文完整的源代码请猛戳github博客，纸上得来终觉浅，建议动手敲敲代码一、什么是跨域？ 1.什么是同源策略及其限制内容？同源策略是一种约定，它是浏览器最核心...

edgardeng 2019-08-23 14:57 评论0 收藏0
九种跨域方式实现原理（完整版）

摘要：二跨域解决方案原理利用标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的数据。使用反向代理实现跨域，是最简单的跨域方式。前言前后端数据交互经常会碰到请求跨域，什么是跨域，以及有哪几种跨域方式，这是本文要探讨的内容。本文完整的源代码请猛戳github博客，纸上得来终觉浅，建议动手敲敲代码一、什么是跨域？ 1.什么是同源策略及其限制内容？同源策略是一种约定，它是浏览器最核心...

justCoding 2019-08-02 14:10 评论0 收藏0
大话javascript 5期：跨域

摘要：同源策略所谓同源是指协议，域名，端口均相同。同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。需注意的是由于同源策略的限制，所读取的为跨域请求接口所在域的，而非当前页。一、什么是跨域 1.URL解析 URL （Uniform Resource Locator ）统一资源定位符（URL）是用于完整地描述Internet上网页和其他资源的地址的...

jzzlee 2019-08-23 16:42 评论0 收藏0