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

一只小鹿

发布时间：2026-10-13 | 3人浏览过

原创

本文详解如何利用原生JavaScript通过Ajax发起跨域请求，并解决浏览器同源策略限制。重点介绍在Flask后端如何配置Access-Control-Allow-Origin及POST方法头，提供完整的后端路由与前端HTML/JS测试代码，涵盖GET与POST请求的跨域处理方案。

Ajax技术能让网站交互体验更加流畅且具备现代感，但受限于浏览器的同源策略，JavaScript直接发起跨域Ajax请求通常会被阻止。本文旨在提供解决方案，前提条件是开发者能够控制Flask后端的响应配置。

核心解决思路如下：

首先，修改服务器响应头，允许接收来自任意域名的请求；其次，明确设置响应头以支持POST方法，确保跨域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请求则难以直接处理。鉴于目前前后端均由同一人开发，暂不深入探讨此限制场景。

以上内容为本文的全部分享，希望能为读者的学习带来帮助，也欢迎大家继续支持本站。