跨域

同源策略

同源的定义是什么？

源：

window.origin 或 location.origin 可以得到当前源

源即：协议+域名+端口号

若两个url的协议+域名+端口号完全一致，则说明他们是同源的

例子：

qq.com 和 www.baidu.com 两者不同源

baidu.com 和 www.baidu.com 两者同源

注意：必须完全一致

同源策略的定义

web浏览器允许第一个页面的脚本访问第二个页面里的数据，但是也只有在两个页面有相同的源时。源是由URI，主机名，端口号组合而成的。这个策略可以阻止一个页面上的恶意脚本通过页面的DOM对象获得访问另一个页面上敏感信息的权限。

简而言之，不同源页面之间，不准互相访问数据。也就是说，它主要是用来保护用户隐私的。

使用CORS跨域

例子在kuayu-1中

当我们用frank.js的去抓取qq-com的json时，network会显示corserror。

解决的办法就是在qq-com的服务器中表示允许frank.com访问：

  response.setHeader('Access-Control-Allow-Origin', 'http://frank.com:8889')

一些问题

为什么a.qq.com 访问qq.com 也算跨域？答：因为历史上，出现过不同公司共用域名， a.qq.com 和qq.com 不一定是同一个网站，浏览器谨慎起见，认为这是不同的源
为什么不同端口也算跨域？答：原因同上，一个端口一个公司。记住安全链条的强度取决于最弱一环，任何安全相关的问题都要谨慎对待
为什么两个网站的是一样的，也算跨域？答：原因同上， | P 可以共用。
为什么可以跨域使用CSS 、JS 和图片等？答：同源策略限制的是数据访问，我们引用css、html等的时候其实并不知道里里面的内容，其本质就像在网页挂链接跳转一样，数据没有访问到，仅限于引用。

使用JSONP跨域

当你用CORS无法直接访问，那么可以尝试使用一个JS文件替换JSON的内容，在其他域下获取此JS文件即可。

首先：

  /*先将friend.js和friend.json的内容换成字符串*/
     const string = fs.readFileSync('./public/friend.js').toString();
     const data = fs.readFileSync('./public/friend.json').toString();
     /*再将两者内容替换 */
     const string2 = string.replace("{{data}}",data) //将friend.js的内容替换成friend.json 的内容
     response.write(string2) //写入

其次创建新的JS文件：

 window.xxx = {{data}} //这一步是为了将json数据行数变换成js数据形式  你可以不加window.xxx试一下

最后在其他域的JS文件下：

 const script = document.createElement('script')
 script.src = 'http://qq.com:8888/friend.js'
 document.body.appendChild(script)
 
 //在控制台打出 window.xxx就可以调出JSON里的数据

关于跨域的理解（助于理解ajax）

跨域