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

Ajax请求跨域问题解决方案分析

前端  /  管理员 发布于 2年前   103

本文实例讲述了Ajax请求跨域问题解决方案。分享给大家供大家参考,具体如下:

几乎每种浏览器都存在默认的安全机制,都有同源策略,因为浏览器恶意的把每个外部请求的都当做是黑客攻击,相当于是对自身的保护,所以浏览器在运行脚本时会判断脚本与请求的页面是否是同一来源,这个同一来源,包括1、协议,2、地址,3、端口,只有三者都相同才被认为是同一来源。

一、解决方案:

1,在服务器端的响应头中添加一个http参数:

res.setHeader("Access-Control-Allow-Origin", "*");res.setHeader('Access-Control-Allow-Methods', 'PUT,GET,POST,DELETE,OPTIONS');

用于告诉客户端可以访问这个跨域的资源,但是问题又来了,知道HTTP协议的同学都清楚,http是一种无状态的基于请求响应的协议,每次的请求都是全新的,服务器无法保持状态,这时我们可以利用服务器的session机制:

session是服务器的一个内存空间,当一个客户端访问服务器时,服务器会为这个客户端创建一个唯一的空间,并且给定一个编号,这个编号就是sessionid。

在响应客户端时,在响应头中加入了cookie.sessionid=xxxx,将这个cookie响应给客户端,当这个客户端下一次请求服务器时,客户端会自动将cookie写到请求头中发送给给服务器,服务器接受到这个请求之后,从请求头中取出这个sessionid,这样就可以判断是哪一个用户了。

二、解决方案:JSONP

原理:Web页面上调用js文件时则不受是否跨域的影响(不仅如此,凡是拥有”src”这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>);所以,我们可以这样做,在客户端声明一个处理json的函数,这个函数作为参数传给服务器,由服务器调用(服务器生成动态的调用代码,并且把想要传给客户端的json数据作为实参注入)

jQuery已经为我们做好了一切,我们只需调用即可

例如:

客户端代码:

$.ajax({  type: "GET",  url: "服务器处理地址",  dataType:"jsonp",  jsonp: "callback",  //传递给请求处理程序或页面的,用以获得jsonp回调函数名的参数名(一般默认为:callback)  //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名,也可以写"?",jQuery会自动为你处理数据  success: function( data){    alert( 'helloworl '+ data.count );  } ,  error: function(msg){    alert( msg);  }});//回调函数,由服务器端调用的函数function handle( jsonResult ){  //处理}服务器代码://先取得传过来的回调函数名var cb=request.callback;//要传送给客户端的 json数据var jsonobj=xxxres.send("("+jsonobj+");");//即生成类似于 handle(jsonobj); 后发送给客户端

更多关于ajax相关内容感兴趣的读者可查看本站专题:《jquery中Ajax用法总结》、《JavaScript中ajax操作技巧总结》、《PHP+ajax技巧与应用小结》及《asp.net ajax技巧总结专题》

希望本文所述对大家ajax程序设计有所帮助。


  • 上一条:
    Ajax原理与应用案例快速入门教程
    下一条:
    关于Ajax跨域问题及解决方案详析
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • nginx + vue配置实现同域名下不同路径访问不同项目(0个评论)
    • 在js中使用URL类用来解析处理URL的示例代码(0个评论)
    • js中动画事件:requestAnimationFrame、transitionend、animation...(0个评论)
    • 在js中mouseover和 mouseenter的区别浅析(0个评论)
    • uniapp调用手机实现打电话录音功能示例代码(0个评论)
    • 近期文章
    • mysql5.7中实现分区表及分区where in查询示例及分区分表对比浅析(0个评论)
    • nginx + vue配置实现同域名下不同路径访问不同项目(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个评论)
    • 近期评论
    • 博主 在

      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
    • 2023-03
    Top

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

    侯体宗的博客