关于跨域的问题

一、在前端开发过程中，如果准备开发富应用，跨域的问题将会随之而来。

        我们先看看什么是跨域呢：

        所谓跨域，或者异源，是指主机名（域名）、协议、端口号只要有其一不同，就为不同的域（或源）。出于保护用户数据的目的，浏览器有一个最基本的策略就是同源策略，只允许页面内的脚本访问当前域的资源（加载脚本、资源等不受此限制）。

二、如果浏览器厂商不对跨域请求进行处理，会给我们带来什么危害呢？

        有心人士（病毒制造者）会利用这个漏洞进行如下攻击：

        1. CSRF/XSRF 攻击，简单的来讲就是在 b.com 页面中请求 a.com 的接口（浏览器会自动带上 用户在 a.com 的 cookie），从而获取用户的在 a.com 的相关信息。

        2. XSS 注入攻击，类似于 SQL 攻击，提交含有恶意脚本的数据到服务器，从而达到破坏页面或者获取用户的 cookie。

三、我们了解到了什么是跨域，那我们又应该如何解决呢，现在找到了这些比较权威的文章，大家先品读一下：

        1. mozilla 官方网站关于跨域的文章（Cross Origin），HTTP访问控制（CORS）

        2. mozilla 官方网站关于浏览器同源策略的简要介绍（Same Origin）， 浏览器的同源策略

四、读完这些文章，你打算怎么处理跨域问题呢，我先谈谈自己关于跨域的解决方案：

        1. 采用 CORS 协议，直接在 Nginx 中设置允许跨域的 header（也可以在后端的应用程序内设置，不过在 Nginx 入口配置的话更加统一），在 location 配置中直接使用指令 add_header（官方文档链接 ），示例配置如下：

location /  {

    proxy_pass http://backend-url;

    add_header Access-Control-Allow-Origin *;

    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

    add_header Access-Control-Max-Age 86400;

}

        2. 使用 JSONP，也是需要后端配合，利用“浏览器加载脚本、资源时不受同源策略的约束”这个特性，但是这种方式非常受限制，例如只能使用 GET 请求，不能携带自定义 header 等。

        3. 其他的一些方法，例如 window.name, document.domain 以及 HTML5 中的特性 window.postMessage 等

五、其他参考链接

        1. 浅谈JS跨域问题

        2. 跨域资源共享 CORS 详解----阮一峰

六、声明

        现在网络上的知识非常复杂，有些是摘自权威书籍的，有些是作者自己理解然后记录下来的，有些是瞎掰的，所以一定要结合情况多多甄别，对于有权威文档的知识点，建议先参考文档。