原生JS实现Ajax跨域请求flask响应内容
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,无能为力。目前前后端均我一人编写,暂不考虑虑此情况。
相关推荐
lyqdanang 2020-08-16
坚持着执着 2020-06-16
坚持着执着 2020-07-16
坚持着执着 2020-06-14
TONIYH 2020-06-05
kentrl 2020-11-10
结束数据方法的参数,该如何定义?-- 集合为自定义实体类中的结合属性,有几个实体类,改变下标就行了。<input id="add" type="button" value="新增visitor&quo
ajaxyan 2020-11-09
zndy0 2020-11-03
学留痕 2020-09-20
Richardxx 2020-11-09
learningever 2020-09-19
chongxiaocheng 2020-08-16
ajaxhe 2020-08-16
curiousL 2020-08-03
TONIYH 2020-07-22
时光如瑾雨微凉 2020-07-19
83510998 2020-07-18
jiaguoquan00 2020-07-07