同源策略:

JS只能与同一个域中的页面进行通讯,必须是协议、域名、端口都相同,相同域下才能相互通信,这可以被认为是一种通信原则,叫同源策略。

跨域:

js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。

下表给出了相对http://store.company.com/dir/page.html同源检测的结果:

四种方法解决跨域:

1、jsonp;

jsonp跨域请求类似于ajax的get请求,比如请求地址url= 'localhsot:8080/search.php?callback=getremotedata',注意jsonp后面的callback参数,请求是必带

2、document.domain;

document.domain也可以解决跨域,不过只能是子域名间的跨域,这个要注意

3、window.name;

先介绍下window.name,window对象有个name属性,只要是当前页面载入过的所有页面都是共享window.name,每个页面都有对window.name的读写权限。其借助iframe中介进行数据通信

4、h5 postMessage

html5提供的方法,缺点是IE8+才支持,主要是通过父子间通过iframe进行相互通讯

建议使用window.name,它没有浏览器兼容性问题,而且使用不复杂,或者用jsonp实现跨域获取数据,具体的话可以百度搜索案例实际操作下。

js 几种跨域解决方法的更多相关文章

  1. [转]vue跨域解决方法

      vue跨域解决方法 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' hea ...

  2. JavaScript跨域解决方法大全

    跨域的定义:JavaScript出于安全性考虑,同源策略机制对跨域访问做了限制.域仅仅是通过“URL的首部”字符串进行识别,“URL的首部”指window.location.protocol +win ...

  3. JS中实现跨域的方法总结

    今天早上在地铁看了点基础知识的考察题,看到了一个JS跨域的问题,仔细想了想自己脑子里竟然只剩下jsonp跨域和用nginx反向代理进行跨域,想着还有别的几种方法,就是想不起来,这个人呢,一上岁数这个脑 ...

  4. AJAX四种跨域处理方法

    同源策略 同源策略 同源策略限制从一个源加载的文档或者脚本如何与来自另一个源的资源进行交互.这是一个用于隔离潜在恶意文件的关键的安全机制. 具体定义是:一段脚本向后台请求数据,只能读取属于同一协议名. ...

  5. jquery、javascript实现(get、post两种方式)跨域解决方法

    一.实现get方式跨域请求数据 浏览器端 <script> $(document).ready(function(){ $.ajax({ url: "http://www.xxx ...

  6. 「JavaScript」JS四种跨域方式详解

    原文地址https://segmentfault.com/a/1190000003642057 超详细并且带 Demo 的 JavaScript 跨域指南来了! 本文基于你了解 JavaScript ...

  7. ajax原理和跨域解决方法

    ajax是异步的 JavaScript 和 XML.通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 1--启动 ...

  8. 转载的别人的ajax跨域解决方法

    http://dynamic.vip.xxxxxx.com/active/<controllers>/<active>/<id> 放在浏览器地址栏中访问可以得到正确 ...

  9. vue+axios跨域解决方法

    通过这种方法也可以解决跨域的问题. 使用http-proxy-middleware 代理解决(项目使用vue-cli脚手架搭建) 例如请求的url:“http://f.apiplus.cn/bj11x ...

随机推荐

  1. nginx安装 linux

    1.安装依赖 yum -y install gcc zlib zlib-devel pcre-devel openssl openssl-devel 2.创建一个文件夹 cd /usr/local m ...

  2. mysql权限管理命令

    #创建用户 create user 'songwp' IDENTIFIED BY '1234' #用户授权 GRANT ALL ON DB01.* TO 'songwp' #撤销权限 REVOKE A ...

  3. rgw实现nfs的首测

    功能介绍 关于rgw实现nfs接口这个,刚接触的人可能并不清楚这个是个什么样的服务架构,rgw是ceph里面的对象存储接口,而nfs则是纯正的网络文件系统接口,这二者如何结合在一起,关于这个,有几个相 ...

  4. Java8 方法引用和构造方法引用

    如果不熟悉Java8新特性的小伙伴,初次看到函数式接口写出的代码可能会是一种懵逼的状态,我是谁,我在哪,我可能学了假的Java,(・∀・(・∀・(・∀・*),但是语言都是在进步的,就好比面向对象的语言 ...

  5. vector删除特定元素

    删除vector中小于20的元素,注意要使迭代器失效,不能简单的删除. #include <iostream>#include <vector>using namespace ...

  6. ABBYY FineReader 15 如何为PDF文档添加页眉页脚

    页眉.页脚是文档页面顶部或底部重复出现的文本信息.很多用户会习惯在文档页面的顶部与底部区域添加页眉.页脚来展现页码.文档标题.作者姓名.品牌名称等附加信息.而ABBYY FineReader 15(W ...

  7. 从数据仓库双集群系统模式探讨,看GaussDB(DWS)的容灾设计

    摘要:本文主要是探讨OLAP关系型数据库框架的数据仓库平台如何设计双集群系统,即增强系统高可用的保障水准,然后讨论一下GaussDB(DWS)的容灾应该如何设计. 当前社会.企业运行当中,大数据分析. ...

  8. python接口测试2-开发WEB接口

    首先要安装flask包: pip install flask 开发一个简单的API接口 # 1. 导入包 from flask import Flask, request # 2. 实例化一个 app ...

  9. Eclipse的环境配置

    1.想要配置Eclipse的环境,就要先下载Eclipse,并安装它,不会下载安装的小伙伴可以点击下面给的链接,里面有我写的详细的教程,这里就不重复了 Eclipse下载与安装:https://blo ...

  10. Java基础教程——封装

    面向对象的三大特征 封装:encapsulation 继承:inheritance 多态:polymorphism 封装 类是一个最基本的封装 封装的好处: 数据安全:保证数据安全 方便调用:提供清晰 ...