跨域及解决方法

165 阅读5分钟

一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第2天,点击查看活动详情

一,跨域:

从浏览器从一个域名的网页去请求另一个域名的资源时,域名、端口、协议任一不同,理解为跨域现象;

1,为什么会存在跨域?
① 安全问题
如果一个网页可以随意地访问另外一个网站,那么就有可能在客户完全不知情的情况下出现安全问题,如以下例子: (1)用户访问www.mybank.com ,登陆并进行网银操作,cookie有时会保存在浏览器,若弹出一个垃圾网站;垃圾网站根据cookie对用户的账号进行操作,如果这时浏览器不予限制,并且银行也没有做响应的安全处理的话,那么用户的信息有可能就这么泄露了,造成用户各类损失;

为什么要跨域
你在做开发的时候,你的文件夹下的文件不是在一个域下面的,当你一个文件需要发送ajax请求,请求另外一个页面的内容的时候,就会跨域。如果不搭服务器,又想要ajax请求的话是不得不跨越。。跨域的作用就是让你能访问不是一个域的文件。\

2,同源策略
同源策略(Same originpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。
所有支持JavaScript 的浏览器 同源策略,它是由Netscape提出的一个著名的安全策略。 现在所有支持JavaScript 的浏览器都会使用这个策略。 所谓同源是指,域名,协议,端口相同。 当一个浏览器的两个tab页中分别打开来 百度和谷歌的页面 当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的, 即检查是否同源,只有和百度同源的脚本才会被执行。 如果非同源,那么在请求数据时,浏览器会在控制台中报一个异常,提示拒绝访问。

二,如何解决跨域问题

一共有六种方式:(仅供参考) 1、jsonp跨域
JSONP(JSON with Padding:填充式JSON),应用JSON的一种新方法,
JSON、JSONP的区别:
1、JSON返回的是一串数据、JSONP返回的是脚本代码(包含一个函数调用)
2、JSONP 只支持get请求、不支持post请求
(类似往页面添加一个script标签,通过src属性去触发对指定地址的请求,故只能是Get请求)

2、nginx反向代理:
www.baidu.com/index.html需… 3、PHP端修改header
header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问
header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

4、document.domain
跨域分为两种,一种xhr不能访问不同源的文档,另一种是不同window之间不能进行交互操作;   document.domain主要是解决第二种情况,且只能适用于主域相同子域不同的情况;   document.domain的设置是有限制的,我们只能把document.domain设置成自身或更高一级的父域,且主域必须相同。 兼容性:所有浏览器都支持; 优点:  可以实现不同window之间的相互访问和操作; 缺点:  只适用于父子window之间的通信,不能用于xhr;  只能在主域相同且子域不同的情况下使用; 使用方式:  不同的框架之间是可以获取window对象的,但却无法获取相应的属性和方法。比如,有一个页面,它的地址是www.example.com/a.html , 在这个页面里面有一个iframe,它的src是example.com/b.html, 很显然,这个页面与它里面的iframe框架是不同域的,所以我们是无法通过在页面中书写js代码来获取iframe中的东西的。
5、window.name window.name在页面的生命周期里共享一个window.name;
兼容性:所有浏览器都支持;
优点:  最简单的利用了浏览器的特性来做到不同域之间的数据传递;  不需要前端和后端的特殊配制;
缺点:  大小限制:window.name最大size是2M左右,不同浏览器中会有不同约定;
安全性:当前页面所有window都可以修改,很不安全;
数据类型:传递数据只能限于字符串,如果是对象或者其他会自动被转化为字符串。
6、postMessage
关键点:
postMessage是h5引入的一个新概念,现在也在进一步的推广和发展中,他进行了一系列的封装,我们可以通过window.postMessage的方式进行使用,并可以监听其发送的消息;
兼容性:移动端可以放心用,但是pc端需要做降级处理
优点
不需要后端介入就可以做到跨域,一个函数外加两个参数(请求url,发送数据)就可以搞定;
移动端兼容性好;
缺点
无法做到一对一的传递方式:监听中需要做很多消息的识别,由于postMessage发出的消息对于同一个页面的不同功能相当于一个广播的过程,该页面的所有onmessage都会收到,所以需要做消息的判断; 安全性问题:三方可以通过截获,注入html或者脚本的形式监听到消息,从而能够做到篡改的效果,所以在postMessage和onmessage中一定要做好这方面的限制;  发送的数据会通过结构化克隆算法进行序列化,所以只有满足该算法要求的参数才能够被解析,否则会报错,如function就不能当作参数进行传递;