前端跨域解决方案总结

参考：https://segmentfault.com/a/1190000011145364

• 简单的跨域请求jsonp即可，复杂的cors，窗口之间JS跨域postMessage，开发环境下接口跨域用nginx反向代理或node中间件比较方便

同源策略

• 同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源
• 如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击
• 同源策略限制：
  • Cookie、LocalStorage 和 IndexDB 无法读取
  • DOM 和 Js对象无法获得
  • AJAX 请求不能发送
• 跨域限制访问，其实是浏览器的限制，其实请求有发出去，对方服务器也有响应，只不过是被浏览器的同源策略拦下来

跨域解决方法

1. jsonp跨域

• 利用script可以跨域的特性，缺点是只能实现get请求
• 应用场景：为了减轻web服务器的负载，我们把js，css，图片等静态资源分离到另一台独立域名的服务器上，在html页面中跨域请求资源。

onBack({"status": true, "user": "admin"})

$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "onBack",    // 自定义回调函数名
    data: {}
});

• jsonpCallback：这个参数用来指定上面那个参数对应的回调函数名，如果不指定，jQuery会自动生成一个随机的函数名

2. 跨域资源共享（CORS）

• cros支持所有形式的http请求
• 普通跨域：只需要服务器端设置Access-Control-Allow-Origin即可，前端无需设置
• 带cookie请求的跨域（简单请求）：前端设置withCredentials属性为true，服务器端响应必须携带Access-Control-Allow-Credentials：true的首部，而且服务器的Access-Control-Allow-Origin不能设置为*，而必须设置允许跨域访问的域名；
  • 同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

• 非简单请求
  • 非简单请求是那种对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。
  • 非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为"预检"请求（preflight）。
  • 浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错

• 简单请求，满足：
  • 1. 请求方法是以下三种方法之一：
    • HEAD
    • GET
    • POST

  • （2）HTTP的头信息不超出以下几种字段：

    • Accept
    • Accept-Language
    • Content-Language
    • Last-Event-ID
    • Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

3. nginx反向代理

• 原理： 同源策略是浏览器的安全策略，不是HTTP协议的一部分。服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略，也就不存在跨越问题
• 通过nginx配置一个代理服务器（域名与domain1相同，端口不同）做跳板机，反向代理访问domain2接口，并且可以顺便修改cookie中domain信息，方便当前域cookie写入，实现跨域登录
• 配置：
  • 找到nginx的配置文件"nginx.conf"

4. WebSocket协议跨域

• WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。

5. document.domain + iframe跨域

• 只限于主域相同，子域不同的跨域应用场景
• 两个页面都通过js强制设置document.domain为基础主域，就实现了同域

1. 父窗口：(http://www.domain.com/a.html)

2. 子窗口：(http://child.domain.com/b.html)，通过window.parent获取变量

6. postMessage跨域

postMessage是HTML5 XMLHttpRequest Level 2中的API，且是为数不多可以跨域操作的window属性之一，它可用于解决以下方面的问题：

1. 页面和其打开的新窗口的数据传递
2. 多窗口之间消息传递
3. 页面与嵌套的iframe消息传递
4. 上面三个场景的跨域数据传递

• 用法：postMessage(data,origin)方法接受两个参数
  • data： html5规范支持任意基本类型或可复制的对象，但部分浏览器只支持字符串，所以传参时最好用JSON.stringify()序列化。
  • origin： 协议+主机+端口号，也可以设置为"*"，表示可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

a.html：(http://www.domain1.com/a.html)

b.html：(http://www.domain2.com/b.html)

7. window.name

• window对象有一个name属性，该属性有一个特征：即在一个窗口的生命周期内，窗口载入的所有的页面都是共享一个window.name的，每一个页面对window.name都有读写的权限，window.name是持久的存在于一个窗口载入的所有页面中的，并不会因为新的页面的载入而被重置。