同源策略:

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. [MIT6.006] 22. Daynamic Programming IV: Guitar Fingering, Tetris, Super Mario Bro. 动态规划IV:吉他指弹,俄罗斯方块,超级玛丽奥

    之前我们讲到动态规划五步中有个Guessing猜,一般情况下猜有两种情况: 在猜和递归上:猜的是用于解决更大问题的子问题: 在子问题定义上:如果要猜更多,就要增加更多子问题. 下面我们来看如果像背包问 ...

  2. MySQL视图详细介绍

    前言: 在MySQL中,视图可能是我们最常用的数据库对象之一了.那么你知道视图和表的区别吗?你知道创建及使用视图要注意哪些点吗?可能很多人对视图只是一知半解,想详细了解视图的同学看过来哟,本篇文章会详 ...

  3. VGA详解及色块碰撞示例

    引言 VGA:video Graphics array,视频图形阵列,阴极射线显像管(CRT)显示器时代产物,很多老显卡.笔记本电脑.投影仪所用接口,已经比较过时. CRT是模拟设备,所以VGA也采用 ...

  4. Python_selenium案例:

    selenium案例 #coding=utf-8 #select下拉框处理 from selenium import webdriver from selenium.webdriver.common. ...

  5. Vue 组件化开发

    组件化开发 基本概念 在最开始的时候,已经大概的聊了聊Vue是单页面开发,用户总是在一个页面上进行操作,看到的不同内容也是由不同组件构成的. 通过用户的操作,Vue将会向用户展示某些组件,也会隐藏某些 ...

  6. CSS属性(CSS盒子模型)

    1.CSS盒子模型 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset=&q ...

  7. 协程实现爬虫的例子主要优势在于充分利用IO时间去请求其他的url

    # 分别使用urlopen和requests两个模块进行演示 # import requests # 需要安装的 # from urllib.request import urlopen # # ur ...

  8. BeanFactory and FactoryBean

    BeanFactory,这是Spring容器的基础实现类,它负责生产和管理Bean的一个工厂.当然BeanFactory只是一个接口,它的常用实现有XmlBeanFactory.DefaultList ...

  9. 面试官:你说你精通源码,那你知道ArrayList 源码的设计思路吗?

    Arraylist源码分析 ArrayList 我们几乎每天都会使用到,但是通常情况下我们只是知道如何去使用,至于其内部是怎么实现的我们不关心,但是有些时候面试官就喜欢问与ArrayList 的源码相 ...

  10. Mac下载器Folx的标签功能怎么使用

    当大家使用Folx下载软件的时候,会发现,下载好的文件或者视频,会被Folx自动打上标签,进行归类,这其实就是Folx自带的智能标签功能,它能智能识别图片.视频.应用程序并分类.但很多时候,智能标签并 ...