同源策略

前言 # 自动接触前端，跨域这个词就一直萦绕在耳畔。因为一般接手的项目都已经做好了这方面的处理，而且之前一直感觉对这方面模棱两可，所以今天就抽个时间梳理一下。 为什么需要跨域 # 跨域这个概念来自一个叫 “同源策略” 的东西。同源策略是 浏览器 （注意是浏览器，跟通信协议无关）上为了安全考虑实施的非常重要的安全机制。 Ajax 默认只能获取到同源的数据，对于非同源的数据，Ajax是获取不到的。 什么是同源？ # 协议相同 域名相同 端口相同 举例来说， http://www.example.com/dir/page.html 这个网址，协议是 http:// ，域名是 www.example.com ，端口是 80 （默认端口可以省略）。这个网址，在这个地址中要去访问下面服务器的数据，那么会发生什么情况呢？ URL 结果 原因 https://www.example.com/dir/other.html 不同源 协议不同，https 和 http http://en.example.com/dir/other.html 不同源 域名不同 http://www.example.com:81/dir/other.html 不同源 端口不同 http://www.example.com/dir/page2.html 同源 协议，域名，端口都相同 http://www.example

一、什么是跨域 JavaScript出于安全方面的考虑，不允许跨域调用其他页面的对象。那什么是跨域呢，简单地理解就是因为JavaScript同源策略的限制，a.com域名下的js无法操作b.com或是c.a.com域名下的对象。 当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域 。不同域之间相互请求资源，就算作“跨域”。 例如： http://www.abc.com/index.html 请求 http://www.efg.com/service.php 。 有一点必须要注意： 跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了 。之所以会跨域，是因为受到了同源策略的限制，同源策略要求源相同才能正常进行通信，即协议、域名、端口号都完全一致。 大家可以参照下图，有助于深入理解跨域。 特别说明两点： 第一：如果是协议和端口造成的跨域问题“前台”是无能为力的。 第二：在跨域问题上，域仅仅是通过“URL的首部”来识别而不会根据域名对应的IP地址是否相同来判断。“URL的首部”可以理解为“协议, 域名和端口必须匹配” 。 二、什么是同源策略及其限制 同源策略限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。 它的存在可以保护用户隐私信息，防止身份伪造等(读取Cookie)。

前言 自动接触前端，跨域这个词就一直萦绕在耳畔。因为一般接手的项目都已经做好了这方面的处理，而且之前一直感觉对这方面模棱两可，所以今天就抽个时间梳理一下。 为什么需要跨域 跨域这个概念来自一个叫 “同源策略” 的东西。同源策略是 浏览器 （注意是浏览器，跟通信协议无关）上为了安全考虑实施的非常重要的安全机制。 Ajax 默认只能获取到同源的数据，对于非同源的数据，Ajax是获取不到的。 什么是同源？ 协议相同 域名相同 端口相同 举例来说， http://www.example.com/dir/page.html 这个网址，协议是 http:// ，域名是 www.example.com ，端口是 80 （默认端口可以省略）。这个网址，在这个地址中要去访问下面服务器的数据，那么会发生什么情况呢？ URL 结果 原因 https://www.example.com/dir/other.html 不同源 协议不同，https 和 http http://en.example.com/dir/other.html 不同源 域名不同 http://www.example.com:81/dir/other.html 不同源 端口不同 http://www.example.com/dir/page2.html 同源 协议，域名，端口都相同 http://www.example.com/dir2

##1. 什么是跨域（Cross-site)？ 想了解跨域，必须先了解一下“同源策略(same origin policy)”。 1.1 同源策略 它限制了某个域下的文档或者js与另一个域中的资源交互的方式，它提供了一种安全机制，这种安全机制可以避免来自恶意网站的攻击。 同源策略要求浏览器允许来自某个网页上的js请求来自另一个网页的数据，当且仅当两个页面来自相同的域。 1.2 什么是域(origin)？ 域是由三部分组合而成：URI Schema（协议类型），host name（域名）,port number（端口号） 举个例子： 1） http://www.domain.com 这个页面，URI Schema是http,host name是www.domain.com,port number是默认的80 2） https://www.xxx.com:8080/xxx/yyy URI Schema是https，hostname是www.xxx.com，port number是8080 由于1）和2）中的三部分都不相同，所以它们就是不同的域。 下面的图更好的解释了什么是同域： PS:IE浏览器里可能不太一样，它不会把端口号作为判断依据。 1.3 为什么要有同源策略？ 提出同源策略的目的是出于安全性考虑，它能够阻止来自恶意网站的脚本通过其他网站的DOM获取其他网站的信息

所谓同源策略，指的是浏览器对不同源的脚本或者文本的访问方式进行的限制。比如源a的js不能读取或设置引入的源b的元素属性。那么先定义下什么是同源，所谓同源，就是指两个页面具有相同的协议，主机（也常说域名），端口，三个要素缺一不可。 看下面的比较就一目了然了： URL1 URL2 说明 是否允许通信 https://github.com/LoveCatDog/StudyOne https://github.com/LoveCatDog/cms-admin-mall 协议、域名、端口都相同 允许 https://github.com/LoveCatDog/cms-admin-mall https://github.com:8080/LoveCatDog/cms-admin-mall 协议、域名相同、端口不同 不允许 http://github.com/LoveCatDog/cms-admin-mall https://github.com/LoveCatDog/cms-admin-mall 域名相同、端口相同、协议不同 不允许 https://github.com/LoveCatDog/cms-admin-mall https://cnblogs.com/LoveCatDog/cms-admin-mall 协议、端口相同、域名不同 不允许 https://github.com

JSONP( JSON with Padding) （json 数据填充 ） 是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题。 跨域产生原因是浏览器的同源策略 。（为了安全） 不同源： 1.协议不同：http 和 https 2.主域不同 www.domain001.com 和 www.domain002.com 3.端口号不同 http：//localhost:8088 和 http：//localhost:9000。 JSONP 原理是:不同源的网站可以相互调用 <script src=“ http://www.oop.im/data.php?callback=jQuery33107585929035461674_1530774352156&_=1530774352157 ”></script> src 属性里加载的资源不受同源策略影响，具有跨域能力。 前端代码： $ ( function (){ $ . ajax ({ url :‘ http : //www.oop.im/data.php‘, type :‘ GET ‘, dataType :‘ jsonp ‘, jsonp :‘ callback ‘, success : function ( res ){ console . log ( res ); } }); }) 　　 注意点：1

浏览器的同源策略: 如果三者有一个不相同,就会造成跨域;阮一峰老师在文中曾提到过;如果不是同源,就会: Cookie,localStorage,IndexDB将不可以获取到. Dom无法获取. ajax请求失败. 我们可以使用以下几种方法: 1.iframe+window.domain 如果有两个不同源的页面,例如:a.test.com 和 b.test.com; 我们在两个页面可以设置 然后我们可以使用页面window下的方法实现了共享. 如果我们在a下面定义了一个: }; 那么在b中: 2.iframe+window.name window对象有个name属性，该属性有个特征：即在一个窗口(window)的生命周期内， 窗口载入的所有的页面都是共享一个window.name的， 每个页面对window.name都有读写的权限。（window.name的值只能是字符串的形式，这个字符串的大小最大能允许2M左右甚至更大的一个容量，具体取决于不同的浏览器，一般够用了。） 如果有两个不同源的页面,例如:a.test.com 和 b.test.com; 在a中: 在b中: js: function test(){ var obj = document.getElementById("iframe"); obj.onload = function(){ var msg = obj

1、引言 前端和后台联调的时候总会涉及到跨域，平时我们跨域主要的方法是通过CORS进行跨域，但是通过CORS进行跨域有的时候会涉及到数据安全的问题，这时候我们可以通过禁用本地浏览器的同源策略来进行跨域的联调。 2、禁用方法 2.1 IE浏览器 IE的禁用同源策略设置，进入IE的Internet选项设置，然后选择安全性，再选择自定义等级，然后下拉，找到「存取跨网络的资料来源」，选择启用即可。 2.2 Chrome浏览器 可以通过添加Chrome启动参数来禁用同源策略，参数如下所示 -- disable - web - security 通过在命令行启动方式来禁用同源策略，如下图所示 或者通过修改快捷方式的参数来禁用同源策略，如下图所示 2.3 Firefox浏览器 FireFox的禁用设置，在地址栏输入 about:config ，然后过滤 security.fileuri 找到 security.fileuri.strict_origin_policy ，双击设置为false即可，如下图所示 3、参考资料 禁用浏览器同源策略的方法 https://www.cnblogs.com/Breaveleon/p/6829222.html 转载请标明出处: 禁用浏览器同源策略的方法 文章来源: https://blog.csdn.net/cgs1999/article/details

一、同源策略 ͬԴ ：协议、域名、端口相同。只要有一个不同就称之为跨域。出现跨域浏览器就要报错。 http://www.a.com/index.html ͬԴ http://www.a.com:81/home.html 不同源，端口号不同 https://www.a.com/home.html 不同源，协议不同 http://www.b.com/home.html 不同源，域名不同 CORS方法 ，CORS的请求成功与否取决于服务器是否同意当前域的请求，通过在服务器设置同意当前域的请求来实现跨域访问。在服务器的响应头部设置Access-Control-Allow-Origin:当前域或* JSONP方法 此方法利用了script标签的src属性，scr属性具备跨域请求资源的能力。a.html请求b.js的数据，动态创建script标签，向服务器请求数据，请求地址后面的callback参数指定函数名。 function req(src){ let script = document.createElement("script"); script.src = src; document.body.appendChild(script); script.onload = function(){ document.body.removeChild(script); } } function

先解释一下什么是同源 同源代表同协议、同域名、同端口。 例如： http://www.baidu.com:80 http 协议、 www.baidu.com 域名、 80 端口 （插入一个小知识 http的默认端口是80 https的默认端口是443） 只有两个页面的三者全部相同时，其中一个页面才能获取另一个页面里面的信息。 为什么要有同源策略 同源策略主要是为了各个页面之间的信息安全。 如果没有同源策略，不同源的http请求可以随意拿到其它网站的信息，那么就没有隐私可言了。完全可以通过iframe获取到你登陆的用户名和密码。 怎么做到跨域请求 #通过没有同源限制的标签中的属性可以做到跨域 link的href属性 iframe的src属性 script的src属性 img的src属性 < img width = "60" src = "https://www.lgstatic.com/i/image/M00/B9/9E/CgqKkVjDiXOAPaljAAL0RuLm39Q629.jpg" > #通过服务器代理进行跨域请求 //在接口中封装一个请求server const express = require ( "express" ) ; //引入express模块 const request = require ( "request" ) ; /