网上的同源和跨域一般都比较复杂,最近也稍微总结了一下:

所谓同源,是浏览器的一种安全机制,作用在于保护网页数据的安全,不同源的网页之间不允许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中添加响应头即可(

                    header('Access-Control-Allow-Origin:*'); //允许所有的跨域请求

                  )

共同点:都需要后端的配合,单独的前端是完成不了跨域需求的,就算是jsonp也需要后端对callback获取,更别说cors没有前端的事了

本人才疏学浅,只会点php皮毛,举例子也都是php的,前端学徒.....

小结ajax中的同源和跨域 jsonp和cors的更多相关文章

  1. XSS中的同源和跨域的问题

    学习自https://www.cnblogs.com/-qing-/p/10966047.html 也谈谈同源策略和跨域问题 1 同源策略 所谓同源策略,指的是浏览器对不同源的脚本或者文本的访问方式进 ...

  2. AJAX_违反了同源策略_就是"跨域"——jsonp 和 cors

    https 协议    默认端口号 443 http 协议    默认端口号 80 同源策略 由网景公司提出的——浏览器 的 为了浏览器安全而生 同源策略: 协议.域名.端口号    必须完全一致 违 ...

  3. 跨域-jsonp、cors、iframe、document.domain、postMessage()

    同源策略 概念:同源: 协议.域名.端口号 完全相同 同源策略是浏览器的一种安全策略:且浏览器不会将违反同源策略的响应信息返回 http://127.0.0.1:3000/index.html     ...

  4. 跨域 jsonp 和 CORS 资料

    http://mp.weixin.qq.com/s/iAShnqvsOyV-Xd0Ft7Nl2Q HTML5安全:CORS(跨域资源共享)简介...ie67不要想了... http://www.cnb ...

  5. AJAX学习笔记2:XHR实现跨域资源共享(CORS)以及和JSONP的对比----转载

    1 前言: 首先对参考文章作者表示感谢,你们的经验总结给我们这些新手提供了太多资源.本文致力于解决AJAX的CORS问题,我在逻辑上进行了梳理:首先,系统的总结了CORS问题的起源-同源策略:其次,介 ...

  6. Ajax进阶之原生js与跨域jsonp

    什么是Ajax? 两个数求和: 用Jquery和数据用json格式 viws函数: from django.shortcuts import render,HttpResponse # Create ...

  7. 跨域资源共享(CORS)--跨域ajax

    几年前,网站开发者都因为ajax的同源策略而撞了南墙.当我们惊叹于XMLHttpRequest对象跨浏览器支持所带来的巨大进步时,我们很快发现没有一个方法可以使我们用JavaScript实现请求跨域访 ...

  8. Ajax请求WCF服务以及跨域的问题解决

    Ajax请求WCF服务以及跨域的问题解决 这两天准备重构一下项目,准备用纯html+js做前台,然后通过ajax+WCF的方式来传递数据,所以就先研究了一下ajax访问的wcf的问题,还想到还折腾了一 ...

  9. AJAX(XMLHttpRequest)进行跨域请求方法详解

    AJAX(XMLHttpRequest)进行跨域请求方法详解(三) 2010年01月11日 08:48:00 阅读数:24213 注意:以下代码请在Firefox 3.5.Chrome 3.0.Saf ...

随机推荐

  1. [Drupal]主题教程

    drupal6和drupal7的主题开发有很大不同,本指南包含了这些不同 drupal7的默认主题是Bartik,6的是Garland drupal的主题系统是如何工作的 这部分内容主要讲述的是dru ...

  2. 允许远程访问MySQL的设置

    允许远程访问MySQL的设置 学习了:http://www.cnblogs.com/hyzhou/archive/2011/12/06/2278236.html Windows版本有workbench ...

  3. 汉澳sinox2014x64server已经能够下载

    大家快去下载,用迅雷快速下载 下载地址 ftp://sinox.3322.org/sinox2014x64server.img 已经能够下载 ftp://sinox.3322.org/sinox201 ...

  4. VC++玩转Native Wifi API 2---Wifi on与wifi off

     有心栽花花不开,无心插柳柳成排. 今天要说的这个wifi on\off是在软件层面控制无线网卡的开和关. 问题听起来简单,调查起来复杂.但解决起来却也简单.关键函数便是Native wifi a ...

  5. 我的IIS7.5竟然不支持ASP.NET路由

    MVC模式下那些友好,屏蔽具体物理文件的URL让我眼馋,咱也想在WEB FORM项目用上一用. 按照指引,添加global.asax,写上路由代码什么的: <%@ Application Lan ...

  6. 架构-Eureka:第一个方法

    ylbtech-架构-Eureka:第一个方法 工程介绍 Spring Cloud 工程目录 model registry-center Servers tzxyfx tzxyfx-provider ...

  7. ELK+kafka日志收集

    一.服务器信息   版本 部署服务器 用途 备注 JDK jdk1.8.0_102 使用ELK5的服务器 Logstash 5.1.1 安装Tomcat的服务器 发送日志 Kafka降插件版本 Log ...

  8. 使用Aliyun Docker 容器镜像/注册表服务

    1.前往阿里云容器镜像服务创建相关资源. 2.登录你的仓库,账户名+公共地址 docker login --username=xxxxxxxxx@aliyun.com registry.cn-hang ...

  9. SQLServer Union 和 Union All 在Insert 语句中的不同效果

    如果不是发了那个帖子还不会像这样意外发现这两者的不同,好歹了也工作了一段时间,真是汗颜 上例子: 执行此条插入语句后,只会插入两条数据,因为会把完全重复的数据过滤掉 insert into tests ...

  10. css中常用的七种三栏布局技巧总结

    三栏布局,顾名思义就是两边固定,中间自适应.三栏布局在开发十分常见,那么什么是三栏布局?例如当当网首页边商品导航和右边导航固定宽度,中间的主要内容随浏览器宽度自适应.效果如下图所示: 下面围绕的这样的 ...