侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

Ajax跨域问题及解决方案(jsonp,cors)

前端  /  管理员 发布于 3年前   120

跨域

跨域有三个条件,满足任何一个条件就是跨域

 1:服务器端口不一致
 2:协议不一致
 3:域名不一致

解决方案:

1.jsonp

  在远程服务器上设法动态的把数据装进js格式的文本代码段中,供客户端调用和进一步处理;在前台通过动态添加script标签及src属性,表面看上去与ajax极为相似,但是,这和ajax并没有任何关系;为了便于使用及交流,逐渐形成了一中非正式传输协议,人们把它称作 jsonp 。

代码如下:

html:

<body>  <form action="/" method="post" enctype="multipart/form-data">    <input type="text" name="xinxi" id="info"><br>    <input type="file" name="file" id="file"><br>    <input type="button" value="提交" name="submit" id="btn">  </form></body><script src="//article/./jquery.js"></script><script>  //提前写好函数,调用函数需要传参  function callback(data){    alert(data);  }  //动态添加script标签及src属性  $('#btn').on('click',function(){    var sc = document.createElement('script');    sc.src = 'http://soul:8888/kuayu?cb=callback';    $('head').append(sc);   })</script>  

js:

var http = require('http'); var url = require('url'); var server = http.createServer(); server.listen('8888',function(){   console.log('8888'); }); server.on('request',function(req,res){   var urls = url.parse(req.url,true);   if(urls.pathname == '/kuayu'){     res.end('callback("jsonp")');//返回的数据需是前端定义的函数调用的形式   } });

 运行结果:

 总结一下:

  jsonp的一个要点就是允许用户传递一个callback参数给服务端, 然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据, 这样客户端就可以随意定制自己的函数来自动处理返回数据了。

  发现凡是拥有"src"这个属性的标签都拥有跨域的能力,比如script、img、iframe; src 的能力就是把远程的数据资源加载到本地(图片、JS代码等);

2.cors

cors跨域的核心点是在服务端代码中设置一个响应头即可

res.setHeader('Access-Control-Allow-Origin','*');

 html:

<body>  <form action="/" method="post" enctype="multipart/form-data" id="form">    <input type="text" name="xinxi" id="info"><br>    <input type="button" value="提交" name="submit" id="btn">  </form></body><script src="//article/./jquery.js"></script><script>  $('#btn').on('click', function () {              $.ajax({            url: 'http://soul:8888/kuayu',            type:'delete',              async:false,            success: function (data) {              alert(data);            },        })  })</script>

js代码:

<body>  <form action="/" method="post" enctype="multipart/form-data" id="form">    <input type="text" name="xinxi" id="info"><br>    <input type="button" value="提交" name="submit" id="btn">  </form></body><script src="//article/./jquery.js"></script><script>  $('#btn').on('click', function () {              $.ajax({            url: 'http://soul:8888/kuayu',            type:'delete',              async:false,            success: function (data) {              alert(data);            },        })  })</script>

效果:

   很多人也认为使用CORS解决跨域很简单,只需要在服务器添加响应头 “ Access-Control-Allow-Origin :* ” 就可以了,

其实不然,因为在CORS中,所有的跨域请求被分为了两种类型,一种是简单请求,一种是复杂请求 (严格来说应该叫‘需预检请求');简单请求与普通的ajax请求无异;但复杂请求,必须在正式发送请求前先发送一个OPTIONS方法的请求已得到服务器的同意,若没有得到服务器的同意,浏览器不会发送正式请求;

满足以下所有条件,被视为简单类型的请求:

1:请求方法必须是 GET、HEAD、POST中的一种,其他方法不行;

2:请求头类型只能是 Accept、Accept-Language、Content-Language、Content-Type,添加其他额外请求头不行;

3:请求头 Content-Type 如果有,值只能是 text/plain、multipart/form-data、application/x-www-form-urlencoded 中的一种,其他值不行;

4:请求中的任意 XMLHttpRequestUpload  对象均没有注册任何事件监听器;

5:请求中没有使用 ReadableStream 对象。(以上摘自西岭老湿微信公众号)

总结一下:

如果请求方式为get和post简单请求,则只需要设置响应头:res.setHeader('Access-Control-Allow-Origin','*');来允许某一个域 或者 所有域进行数据共享;

若是其他方式的请求,会在发送真正的请求之前发送一个options请求,通过options请求里设置:res.setHeader('Access-Control-Allow-Methods', 'DELETE'),

告知服务器正式请求会使用哪一种 HTTP 请求方法。

总结

以上所述是小编给大家介绍的Ajax跨域问题及解决方案(jsonp,cors),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!


  • 上一条:
    Struts2.5 利用Ajax将json数据传值到JSP的实例
    下一条:
    div的dispaly:inline样式 和span的区别
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 在js中使用URL类用来解析处理URL的示例代码(0个评论)
    • js中动画事件:requestAnimationFrame、transitionend、animation...(0个评论)
    • 在js中mouseover和 mouseenter的区别浅析(0个评论)
    • uniapp调用手机实现打电话录音功能示例代码(0个评论)
    • 在uniapp开发微信小程序中图片大小显示不正常解决方法(0个评论)
    • 近期文章
    • 在laravel框架中的5个HTTP客户端技巧分享(0个评论)
    • 在go语言中使用FFmpeg库实现PCM音频文件编码为mp3格式文件流程步骤(0个评论)
    • gopacket免安装Pcap实现驱动层流量抓包流程步骤(0个评论)
    • 在laravel项目中实现密码强度验证功能推荐扩展包:password-strength(0个评论)
    • 在go语言中用filepath.Match()函数以通配符模式匹配字符串示例(0个评论)
    • Laravel Response Classes 响应类使用优化浅析(0个评论)
    • mysql中sql_mode的各模式浅析(0个评论)
    • 百度文心一言今天发布,个人第一批内测体验记录,不好别打我(0个评论)
    • 嘿加密世界让我们谈谈在共识中将中本聪主流化(0个评论)
    • 在go语言中寻找两个切片或数组中的相同元素/共同点/交集并集示例代码(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客