热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

跨域的实现方法

一、jsonphtml中script标签可以引入其他域下的js,比如引入线上的jquery库。利用这个特性,可实现跨域访问接口,不过需要后端支持。web页面中,通过script标签

一、jsonp

html中script标签可以引入其他域下的js,比如引入线上的jquery库。利用这个特性,可实现跨域访问接口,不过需要后端支持。

web页面中,通过script标签获取js代码可以进行跨域,我们可以动态的创建script标签,设置src属性指向我们请求资源的url地址,然后放到head标签中。这样就可以把不同域的数据加载到本域名下,不过需要后端支持jsonp,也就是通过前端的url中的callback参数动态的生成回调函数名,通过传参的形式执行获取到的数据,这样的话,前端预定义好的函数就可以让传来的数据自动运行。

介绍跨域方式之前,我们先来修改本机的hosts文件如下:

127.0.0.1 localhost
127.0.0.1 test.com
127.0.0.1 a.test.com
127.0.0.1 b.test.com

这样本地地址就对应了不同的域。

JSONP的跨域方式是利用

A页面:




使用降域实现跨域



 


四、postMessage

window.postMessage()是HTML5的新方法,IE8+支持。可以使用它来向其它的window对象发送数据,无论这个window对象是属于同源或不同源。

postMessage(data, origin)方法接收两个参数:



  1. data:要传递的数据。html5规范中提到该参数可以是Javascript的任意基本类型或可复制的对象,然而并不是所有浏览器都做到了这点,部分浏览器只能处理字符串参数,所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化,在低版本IE中引用json2.js可以实现类似效果。

  2. origin: 字符串参数。用来限定接收消息的那个window对象所在的域,如果不想限定域,可以使用通配符*,这样可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。

同样以上面的例子来说明postMessage()的原理(A页面中嵌套了一个B页面)
那么我们可以在A页面中通过postMessage()方法向跨域的B页面传递数据




使用降域实现跨域



 



推荐阅读
  • 本文介绍了前端人员必须知道的三个问题,即前端都做哪些事、前端都需要哪些技术,以及前端的发展阶段。初级阶段包括HTML、CSS、JavaScript和jQuery的基础知识。进阶阶段涵盖了面向对象编程、响应式设计、Ajax、HTML5等新兴技术。高级阶段包括架构基础、模块化开发、预编译和前沿规范等内容。此外,还介绍了一些后端服务,如Node.js。 ... [详细]
  • 本文介绍了高校天文共享平台的开发过程中的思考和规划。该平台旨在为高校学生提供天象预报、科普知识、观测活动、图片分享等功能。文章分析了项目的技术栈选择、网站前端布局、业务流程、数据库结构等方面,并总结了项目存在的问题,如前后端未分离、代码混乱等。作者表示希望通过记录和规划,能够理清思路,进一步完善该平台。 ... [详细]
  • 开发笔记:加密&json&StringIO模块&BytesIO模块
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识,希望对你有一定的参考价值。一、加密加密 ... [详细]
  • Spring常用注解(绝对经典),全靠这份Java知识点PDF大全
    本文介绍了Spring常用注解和注入bean的注解,包括@Bean、@Autowired、@Inject等,同时提供了一个Java知识点PDF大全的资源链接。其中详细介绍了ColorFactoryBean的使用,以及@Autowired和@Inject的区别和用法。此外,还提到了@Required属性的配置和使用。 ... [详细]
  • Java序列化对象传给PHP的方法及原理解析
    本文介绍了Java序列化对象传给PHP的方法及原理,包括Java对象传递的方式、序列化的方式、PHP中的序列化用法介绍、Java是否能反序列化PHP的数据、Java序列化的原理以及解决Java序列化中的问题。同时还解释了序列化的概念和作用,以及代码执行序列化所需要的权限。最后指出,序列化会将对象实例的所有字段都进行序列化,使得数据能够被表示为实例的序列化数据,但只有能够解释该格式的代码才能够确定数据的内容。 ... [详细]
  • 本文介绍了如何使用php限制数据库插入的条数并显示每次插入数据库之间的数据数目,以及避免重复提交的方法。同时还介绍了如何限制某一个数据库用户的并发连接数,以及设置数据库的连接数和连接超时时间的方法。最后提供了一些关于浏览器在线用户数和数据库连接数量比例的参考值。 ... [详细]
  • Voicewo在线语音识别转换jQuery插件的特点和示例
    本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件,该插件具有快速、架构、风格、扩展和兼容等特点,适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
  • Node.js学习笔记(一)package.json及cnpm
    本文介绍了Node.js中包的概念,以及如何使用包来统一管理具有相互依赖关系的模块。同时还介绍了NPM(Node Package Manager)的基本介绍和使用方法,以及如何通过NPM下载第三方模块。 ... [详细]
  • 本文介绍了Java后台Jsonp处理方法及其应用场景。首先解释了Jsonp是一个非官方的协议,它允许在服务器端通过Script tags返回至客户端,并通过javascript callback的形式实现跨域访问。然后介绍了JSON系统开发方法,它是一种面向数据结构的分析和设计方法,以活动为中心,将一连串的活动顺序组合成一个完整的工作进程。接着给出了一个客户端示例代码,使用了jQuery的ajax方法请求一个Jsonp数据。 ... [详细]
  • springboot启动不了_Spring Boot + MyBatis 多模块搭建教程
    作者:枫本非凡来源:www.cnblogs.comorzlinp9717399.html一、前言1、创建父工程最近公司项目准备开始重构,框 ... [详细]
  • 通过手机浏览器调用客户端QQ
    php教程|php手册thinkphp代码,代码示例,代码参考,php短信,数据库备份代码,令牌验证,去除代码中的空白和注释调用QQ客户端php教程-php手册可调用iosandr ... [详细]
  • ajaxfileupload.js 兼容ie9,10
    在使用ajaxfileupload.js上传文件时,ie9和ie10会报INVALID_CHARACTER_ERR(5)的错误,导致无法上传成功;网上查了一系列处理方式:如:把代码 ... [详细]
  • 变动|时限_即时通讯开发技术分享HTTP长连接长轮询
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了即时通讯开发技术分享HTTP长连接长轮询相关的知识,希望对你有一定的参考价值。在 ... [详细]
  • 本文介绍了Java工具类库Hutool,该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装,并提供了各种Util工具类。同时,还介绍了Hutool的组件,包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码,提高开发效率。 ... [详细]
  • 如何用UE4制作2D游戏文档——计算篇
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了如何用UE4制作2D游戏文档——计算篇相关的知识,希望对你有一定的参考价值。 ... [详细]
author-avatar
KEN
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有