同源策略

同源策略是客户端脚本的重要的安全度量标准,其目的是防止某个文档或脚本从多个不同源装载,所谓同源指的是:协议,域名,端口相同,同源策略是一种安全协议,只一段脚本只能读取来自同一来源的窗口和文档的属性

跨域

什么是跨域

跨域指的是浏览器不能执行其他网站的脚本,他是有浏览器的同源策略造成的,是浏览器对JavaScript施加的安全限制,防止他人恶意攻击网站

解决方法

原理:动态创建一个script标签,利用script标签的src属性不受同源策略限制,因为所有的src属性都不收同源策略限制,可以请求第三方服务器数据内容

步骤

去创建一个script标签
script的src属性设置接口地址
接口参数,必须要带一个自定义函数要不然后带无法返回数据
通过定义函数名去接收后台返回数据

var script = document.createElement("script");

//script 的 src 属性设置接口地址 并带一个 callback 回调函数名称

script.src = "<script src="http://localhost:3000/get";

//插入到页面

document.head.appendChild(script);

//通过定义函数名去接收后台返回数据 function jsonpCallback(data){

//注意 jsonp 返回的数据是 json 对象可以直接使用

//Ajax 取得数据是 json 字符串需要转换成 json 对象才可以使用。

}

cors:跨域资源共享

原理CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能[同源]使用的限制。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低IE10(ie8XDomainRequest能支持CORS)。

解决方案

通过手写实现

通过在被请求的路由中设置header头，可以实现跨域。

  // * 表示允许任何域名来访问
  res.setHeader('Access-Control-Allow-Origin', '*')
  // 允许指定源访问
  // res.setHeader('Access-Control-Allow- Origin',   
  'http://www.xxx.com')
  res.send(Date.now().toString())
})

这种方案无需客户端做出任何变化(客户端不用改代码),就当跨域问题不存在一样
服务器响应的时候添加一个Access-Control-Allow-Origin的响应头

使用cors

要点

他是一个包要单独下载使用 npm包cors (npm i cors)
当做express中的中间件,注意代码放在顶部

jsonp VS cors对比

jsonp

不是ajax
只能支持get方法
兼容性好

cors

前端不需要做额外的修改,就当跨域问题不存在
是ajax
支持各种方式的请求
浏览器的支持不好(标准的浏览器都支持)

每日鸡汤

为人之初，上帝固然分配给每个人的果实不同，但人活着的意义，不是接受，而是争取。别人给你的，永远不是真正属于自己的，只有自己争取而来的，才能坦然地宣告：这是我的

什么是跨域与同源