跨域

山有木兮木有枝，心悦君兮君不知。

跨域

• 跨域限制主要的目的就是为了用户的上网安全。浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的。

同源策略

• 同源策略是浏览器对 JavaScript 实施的安全限制，只要协议、域名、端口有任何一个不同，都被当作是不同的域。

无同源策略的安全问题

1. 如果没有 DOM 同源策略，也就是说不同域的 iframe 之间可以相互访问，那么黑客可以这样进行攻击：

• 做一个假网站，里面用 iframe 嵌套一个银行网站  http://mybank.com。把 iframe 宽高啥的调整到页面全部，这样用户进来除了域名，别的部分和银行的网站没有任何差别。这时如果用户输入账号密码，我们的主网站可以跨域访问到  http://mybank.com  的 dom 节点，就可以拿到用户的账户密码了。

2. 如果没有 XMLHttpRequest 同源策略，那么黑客可以进行 CSRF（跨站请求伪造） 攻击

• 用户登录了自己的银行页面  http://mybank.com，http://mybank.com  向用户的 cookie 中添加用户标识。用户浏览了恶意页面  http://evil.com，执行了页面中的恶意 AJAX 请求代码。http://evil.com  向  http://mybank.com  发起 AJAX HTTP 请求，请求会默认把  http://mybank.com  对应 cookie 也同时发送过去。银行页面从发送的 cookie 中提取用户标识，验证用户无误，response 中返回请求数据。此时数据就泄露了。
  而且由于 Ajax 在后台执行，用户无法感知这一过程。

跨域解决

1. JSONP

• ajax 请求受同源策略影响，不允许进行跨域请求，而 script 标签 src 属性中的链 接却可以访问跨域的 js 脚本，利用这个特性，服务端不再返回 JSON 格式的数据，而是 返回一段调用某个函数的 js 代码，在 src 中进行了调用，这样实现了跨域。JSON 只支持 get。

//动态创建 script
var script = document.createElement('script');

// 设置回调函数
function getData(data) {
  console.log(data);
}

//设置 script 的 src 属性，并设置请求地址
script.src = 'http://localhost:5000/?callback=getData';

// 让 script 生效
document.body.appendChild(script);

2. proxy 代理

• 客户端浏览器发起一个请求会存在跨域问题，但是服务端向另一个服务端发起请求并无跨域，因为跨域问题归根结底源于同源策略，而同源策略只存在于浏览器那么我们可以通过 Nginx 配置一个代理服务器，反向代理访问跨域的接口。

3. CORS

• CORS(Cross-origin resource sharing)跨域资源共享 服务器设置对 CORS 的支持原理：服务器设置 Access-Control-Allow-Origin HTTP 响应头之后，浏览器将会允许跨域请求。