原生JS实现Ajax跨域请求flask响应内容

2017-10-24 08:05:13来源:CSDN作者:baidu_35085676人点击

分享

Ajax大法好,网站感觉跟高大上,但由于Js的局限,跨域Ajax无法实现,这里,讲一下解决办法,前提是需要能够自己可以控制flask端的响应。

主要技术:

修改服务器相应的相应头,使其可以相应任意域名。and设置响应头,使其能够相应POST方法。

实现代码:

这里先放flask代码:

from flask import make_response@app.route('/test',methods=['get','post'])def Test():    if request.method=='GET':        rst = make_response('aaa')        rst.headers['Access-Control-Allow-Origin'] = '*' #任意域名        return rst    else:        rst = make_response('bbb')        rst.headers['Access-Control-Allow-Origin'] = '*'        rst.headers['Access-Control-Allow-Methods'] = 'POST'  #响应POST        return rst

html测试代码:

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><span id="ss">test get</span><button onclick="getAjax()">click</button>    <p id="time">test post</p>    <input type="submit" value="click" onclick="getPostAjax()"><script>    function getPostAjax() {        var xmlhttp = new XMLHttpRequest();        xmlhttp.onreadystatechange=function () {            if(xmlhttp.readyState=4 && xmlhttp.status ==200 ) {                document.getElementById("time").innerText = xmlhttp.responseText;            }        }        xmlhttp.open("POST","http://localhost:5000/test",true);        xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");#这句话可以发送post数据,没有此句post的内容无法传递        xmlhttp.send();    }    function getAjax() {        var xmlhttp = new XMLHttpRequest();        xmlhttp.onreadystatechange=function () {            if(xmlhttp.readyState==4 && xmlhttp.status == 200){                document.getElementById("ss").innerHTML=xmlhttp.responseText;            }        }        xmlhttp.open("GET","http://localhost:5000/test",true);        xmlhttp.send();    }</script></body></html>

无法控制响应头

对于这种情况,get请求可以使用jquery完成,post,无能为力。目前前后端均我一人编写,暂不考虑虑此情况。

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台