小结ajax中的同源和跨域 jsonp和cors
网上的同源和跨域一般都比较复杂,最近也稍微总结了一下:
所谓同源,是浏览器的一种安全机制,作用在于保护网页数据的安全,不同源的网页之间不允许cookie dom ajax等行为
同源的条件:1.协议相同 2.域名相同 3.端口号相同
注意点:同源 浏览器对服务器的请求其实是成功的,服务器也有响应,但是因为浏览器的拦截导致报错,所以说不成功
跨域:不同源的网页之间发出请求就是跨域
如何实现跨域?jsonp(json with padding) cors
有三个标签不受同源的影响 为img link script
script最为重要,这也是jsonp的原理,利用script 的 src 不受同源策略影响 ,这里只能使用get发出请求,因为实际是动态创建script标签并设置src去请求服务器,在请求地址后拼接函数callback='函数名',从而实现跨域
以php举例子,在$_GET中,获取callback的值即可实现需求
function fn(res){
console.log(res)
}
代码 button.onclick = function(){
//创建
var script = document.createElement('script');
//赋值
script.src = '地址?callback = fn'
//追加
document.body.appendChild(script);
}
php中
echo "$_GET('callback')"."(数据)";
服务端调用函数的字符串就会被执行,从而得到返回数据
当然用jQuery只需要简单的dataType : 'jsonp',写这么多原生js也是为了更好理解
最后说一下jsonp 和 cors两种解决跨域的方法
jsonp cors
只支持get(数据量有限) get/post
兼容性好 IE10+,cors对前端友好,都不需要前端人员设置.在php中添加响应头即可(
)
共同点:都需要后端的配合,单独的前端是完成不了跨域需求的,就算是jsonp也需要后端对callback获取,更别说cors没有前端的事了
本人才疏学浅,只会点php皮毛,举例子也都是php的,前端学徒.....
小结ajax中的同源和跨域 jsonp和cors的更多相关文章
- XSS中的同源和跨域的问题
学习自https://www.cnblogs.com/-qing-/p/10966047.html 也谈谈同源策略和跨域问题 1 同源策略 所谓同源策略,指的是浏览器对不同源的脚本或者文本的访问方式进 ...
- AJAX_违反了同源策略_就是"跨域"——jsonp 和 cors
https 协议 默认端口号 443 http 协议 默认端口号 80 同源策略 由网景公司提出的——浏览器 的 为了浏览器安全而生 同源策略: 协议.域名.端口号 必须完全一致 违 ...
- 跨域-jsonp、cors、iframe、document.domain、postMessage()
同源策略 概念:同源: 协议.域名.端口号 完全相同 同源策略是浏览器的一种安全策略:且浏览器不会将违反同源策略的响应信息返回 http://127.0.0.1:3000/index.html ...
- 跨域 jsonp 和 CORS 资料
http://mp.weixin.qq.com/s/iAShnqvsOyV-Xd0Ft7Nl2Q HTML5安全:CORS(跨域资源共享)简介...ie67不要想了... http://www.cnb ...
- AJAX学习笔记2:XHR实现跨域资源共享(CORS)以及和JSONP的对比----转载
1 前言: 首先对参考文章作者表示感谢,你们的经验总结给我们这些新手提供了太多资源.本文致力于解决AJAX的CORS问题,我在逻辑上进行了梳理:首先,系统的总结了CORS问题的起源-同源策略:其次,介 ...
- Ajax进阶之原生js与跨域jsonp
什么是Ajax? 两个数求和: 用Jquery和数据用json格式 viws函数: from django.shortcuts import render,HttpResponse # Create ...
- 跨域资源共享(CORS)--跨域ajax
几年前,网站开发者都因为ajax的同源策略而撞了南墙.当我们惊叹于XMLHttpRequest对象跨浏览器支持所带来的巨大进步时,我们很快发现没有一个方法可以使我们用JavaScript实现请求跨域访 ...
- Ajax请求WCF服务以及跨域的问题解决
Ajax请求WCF服务以及跨域的问题解决 这两天准备重构一下项目,准备用纯html+js做前台,然后通过ajax+WCF的方式来传递数据,所以就先研究了一下ajax访问的wcf的问题,还想到还折腾了一 ...
- AJAX(XMLHttpRequest)进行跨域请求方法详解
AJAX(XMLHttpRequest)进行跨域请求方法详解(三) 2010年01月11日 08:48:00 阅读数:24213 注意:以下代码请在Firefox 3.5.Chrome 3.0.Saf ...
随机推荐
- [Drupal]主题教程
drupal6和drupal7的主题开发有很大不同,本指南包含了这些不同 drupal7的默认主题是Bartik,6的是Garland drupal的主题系统是如何工作的 这部分内容主要讲述的是dru ...
- 允许远程访问MySQL的设置
允许远程访问MySQL的设置 学习了:http://www.cnblogs.com/hyzhou/archive/2011/12/06/2278236.html Windows版本有workbench ...
- 汉澳sinox2014x64server已经能够下载
大家快去下载,用迅雷快速下载 下载地址 ftp://sinox.3322.org/sinox2014x64server.img 已经能够下载 ftp://sinox.3322.org/sinox201 ...
- VC++玩转Native Wifi API 2---Wifi on与wifi off
有心栽花花不开,无心插柳柳成排. 今天要说的这个wifi on\off是在软件层面控制无线网卡的开和关. 问题听起来简单,调查起来复杂.但解决起来却也简单.关键函数便是Native wifi a ...
- 我的IIS7.5竟然不支持ASP.NET路由
MVC模式下那些友好,屏蔽具体物理文件的URL让我眼馋,咱也想在WEB FORM项目用上一用. 按照指引,添加global.asax,写上路由代码什么的: <%@ Application Lan ...
- 架构-Eureka:第一个方法
ylbtech-架构-Eureka:第一个方法 工程介绍 Spring Cloud 工程目录 model registry-center Servers tzxyfx tzxyfx-provider ...
- ELK+kafka日志收集
一.服务器信息 版本 部署服务器 用途 备注 JDK jdk1.8.0_102 使用ELK5的服务器 Logstash 5.1.1 安装Tomcat的服务器 发送日志 Kafka降插件版本 Log ...
- 使用Aliyun Docker 容器镜像/注册表服务
1.前往阿里云容器镜像服务创建相关资源. 2.登录你的仓库,账户名+公共地址 docker login --username=xxxxxxxxx@aliyun.com registry.cn-hang ...
- SQLServer Union 和 Union All 在Insert 语句中的不同效果
如果不是发了那个帖子还不会像这样意外发现这两者的不同,好歹了也工作了一段时间,真是汗颜 上例子: 执行此条插入语句后,只会插入两条数据,因为会把完全重复的数据过滤掉 insert into tests ...
- css中常用的七种三栏布局技巧总结
三栏布局,顾名思义就是两边固定,中间自适应.三栏布局在开发十分常见,那么什么是三栏布局?例如当当网首页边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应.效果如下图所示: 下面围绕的这样的 ...