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

2024-09-01 08:33:55

字体：大中小

来源：转载

供稿：网友

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，无能为力。目前前后端均我一人编写，暂不考虑虑此情况。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持VeVb武林网。

注：相关教程知识阅读请移步到JavaScript/Ajax教程频道。

上一篇：js 中rewrap-ajax.js插件实例代码

下一篇：原生JavaScrpit中异步请求Ajax实现方法