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


Posted in Javascript onOctober 24, 2017

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
用js实现多域名不同文件的调用方法
Jan 12 Javascript
JS函数实现动态添加CSS样式表文件
Dec 15 Javascript
jquery ajax属性async(同步异步)示例
Nov 05 Javascript
JS中怎样判断undefined(比较不错的方法)
Mar 27 Javascript
jQuery中replaceWith()方法用法实例
Dec 25 Javascript
纯js模拟div层弹性运动的方法
Jul 27 Javascript
jquery实现点击展开列表同时隐藏其他列表
Aug 10 Javascript
JavaScript快速切换繁体中文和简体中文的方法及网站支持简繁体切换的绝招
Mar 07 Javascript
实例讲解Vue.js中router传参
Apr 22 Javascript
elementUI table表格动态合并的示例代码
May 15 Javascript
Vue实现按钮级权限方案
Nov 21 Javascript
Vue实现简单的留言板
Oct 23 Javascript
JS去掉字符串末尾的标点符号及删除最后一个字符的方法
Oct 24 #Javascript
AngularJS模糊查询功能实现代码(过滤内容下拉菜单排序过滤敏感字符验证判断后添加表格信息)
Oct 24 #Javascript
基于js中this和event 的区别(详解)
Oct 24 #Javascript
浅谈es6语法 (Proxy和Reflect的对比)
Oct 24 #Javascript
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 #jQuery
通俗易懂地解释JS中的闭包
Oct 23 #Javascript
AngularJS 教程及实例代码
Oct 23 #Javascript
You might like
php二分查找二种实现示例
2014/03/12 PHP
PHP实现文件下载断点续传详解
2014/10/15 PHP
详解EventDispatcher事件分发组件
2016/12/25 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
如何实现浏览器上的右键菜单
2006/07/10 Javascript
常用的jquery模板插件——jQuery Boilerplate介绍
2014/09/23 Javascript
Jquery中find与each方法用法实例
2015/02/04 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
纯javascript响应式树形菜单效果
2015/11/10 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
BootStrap glyphicon图标无法显示的解决方法
2016/09/06 Javascript
jquery对所有input type=text的控件赋值实现方法
2016/12/02 Javascript
详解nodejs中的process进程
2017/03/19 NodeJs
vuejs绑定class和style样式
2017/04/11 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
2017/07/13 Javascript
layDate插件设置开始和结束时间
2018/11/15 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
实例分析JS中的相等性判断===、 ==和Object.is()
2019/11/17 Javascript
在react中使用vue的状态管理的方法示例
2020/05/02 Javascript
Python实现栈的方法
2015/05/26 Python
Python第三方库的安装方法总结
2016/06/06 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
django中send_mail功能实现详解
2018/02/06 Python
Python实现的多项式拟合功能示例【基于matplotlib】
2018/05/15 Python
Selenium定位元素操作示例
2018/08/10 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
Django serializer优化类视图的实现示例
2020/07/16 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
selenium与xpath之获取指定位置的元素的实现
2021/01/26 Python
Html5移动端获奖无缝滚动动画实现示例
2018/06/25 HTML / CSS
HTML5中div、article、section的区别及使用介绍
2013/08/14 HTML / CSS
详解HTML5布局和HTML5标签
2020/10/26 HTML / CSS
2014年置业顾问工作总结
2014/11/17 职场文书
全陪导游词
2015/02/04 职场文书
Nginx跨域问题解析与解决
2022/08/05 Servers