原生JS实现Ajax跨域请求flask响应内容
程序员文章站
2022-07-06 20:32:24
ajax方法好，网站感觉跟高大上，但由于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，无能为力。目前前后端均我一人编写，暂不考虑虑此情况。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
上一篇： 【Processing】音画互动小程序