解决跨域问题

  介绍一下如何解决跨域问题。
  目录：

---

为什么会有跨域问题

  为了阻止一个页面上的恶意脚本通过页面的DOM对象获得访问另一个页面上敏感信息的权限，浏览器采用了同源策略。
  在这个策略下，只有在两个页面有相同的源时，web 浏览器允许一个页面的脚本访问另一个页面里的数据。
  浏览器的同源策略又分为两种：

• DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是 iframe 跨域的情况，不同域名的 iframe 是限制互相访问的。
• XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。

  同源策略限制的范围：

• 无法读取Cookie、LocalStorage 和 IndexDB 。
• 无法获取DOM 。
• 不能发送 Ajax 请求。

---

判断是否同源

  假设一个 URL 为 http://www.example.com/dir/page.html，以其为例判断以下 URL 是否同源：

URL 对比 结果 原因 http://www.example.com/dir/page2.html 同源 相同的协议,主机和端口 http://www.example.com/dir2/other.html 同源 相同的协议,主机和端口 http://username:[e-mail]/dir2/other.html 同源 相同的协议,主机和端口 http://www.example.com:81/dir/other.html 不同源 相同的协议和主机但端口不同 https://www.example.com/dir/other.html 不同源 协议不同 http://en.example.com/dir/other.html 不同源 不同主机 http://example.com/dir/other.html 不同源 不同主机(需要精确匹配) http://www.example.com:80/dir/other.html 待定 端口明确，依赖浏览器实现

---

JSONP实现跨域

  jsonp 利用了 <script> 标签中 src 属性能够跨域访问的特性，先定义了一个回调方法，然后将其当作 url 参数的一部分发送到服务端，服务端通过字符串拼接的方式将用户想要的数据包裹在回调方法中，再传回来，返回的 js 脚本直接就会执行了。

<script type="text/javascript">    // 定义一个回调函数函数    function callback(data) {        console.log(data);    };    // 创建一个脚本，并且告诉服务端端回调函数名叫callback    var script = document.createElement('script');    var url = 'http://localhost:3000/jsonp?callback=callback';    script.setAttribute("type","text/javascript");    script.src = url;        document.body.appendChild(script);</script>

  使用 node.js 写服务端代码响应请求：

/* GET jsonp listing. */router.get('/', function(req, res, next) {    // 要返回的数据    var data = {        "name": "kaelyn"    };    // 把json数据转化成字符串，方便字符串拼接    data = JSON.stringify(data);    // 拼接回调函数的字符串    var callback = req.query.callback+'('+data+');';    res.end(callback);});

  这样就实现了通过 jsonp 跨域访问：
  

  值得注意的是，回调函数需要是全局的。
  req.query.callback 获取 URL 的键名为‘callback’ 的查询参数串。
  关于 node.js 的 Express 框架的基本使用可以看看这里。

  在前端除了上面的一种写法之外，还有其他写法：

<script type="text/javascript">    function callback(data) {        console.log(data);    };</script><!--直接插入一个 script 标签--><script type="text/javascript" src="http://localhost:3000/jsonp?callback=callback"></script>

  还可以使用 jquery 来实现：

<script type="text/javascript">    $.ajax({        type:"get",        url:"http://localhost:3000/jsonp?",        dataType: "jsonp",        jsonp: "callback",  //在一个jsonp请求中重写回调函数的名字(key)        jsonpCallback:"showData",   //为jsonp请求指定一个回调函数名(value)        async:false,        success:function(data){            console.log(data);          }    });</script>

  在 AJAX 请求设置中，jsonp 和 jsonpCallback 选项可以不写，jquery都会帮我们写好的，默认直接回调调用请求成功后的回调函数 success 。
  如果像上面的代码一样定义，则在服务端接收到的请求 URL 将会加上 ?&callback=showData，如果我们改了AJAX 请求设置中 jsonp 的值，那么服务端也需要做出一些修改：

var callback = req.query.callback+'('+data+');';

  上面代码中的 req.query.callback 要进行相应的修改，因为 URL 中的参数串的键名已经改了，如果还是原来的代码将会获取到 undefined。

虽然是使用了 jquery 帮我们封装好的方法，但是 jsonp 和 ajax 在本质上是不一样的东西，ajax 的核心是通过 XmlHttpRequest 获取非本页内容，而 jsonp 的核心则是动态添加<script>标签来调用服务器提供的 js 脚本。

---

CORS(跨源资源分享)

  CORS（Cross-origin resource sharing）是一个W3C标准，是跨源AJAX请求的根本解决方法。
  在服务端启用CORS:

//设置跨域访问  app.all('*', function(req, res, next) {      res.header("Access-Control-Allow-Origin", "*");      res.header("Access-Control-Allow-Headers", "X-Requested-With");      res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");      res.header("X-Powered-By",' 3.2.1')      res.header("Content-Type", "application/json;charset=utf-8");      next();  });

上面代码的all方法表示所有请求都必须通过该中间件，参数中的“*”表示对所有路径有效。

  在网页中发起 ajax 请求：

$.ajax({    type:"get",    url:"http://localhost:3000/query",    dataType: "json",    success:function(data){        console.log(data);      }});

  结果当然是能成功访问啦：
  
  可以做个比较，如果没有在服务端没有加上上面的允许其他源访问的代码，浏览器将会报错：
  
  服务端返回的 Access-Control-Allow-Origin: * 表明，该资源可以被任意外域访问。如果服务端仅允许来自 http://foo.example 的访问，该首部字段的内容如下：Access-Control-Allow-Origin: http://foo.example。
  如果希望允许多个域名访问，则可以这样设置：

app.all('*', function(req, res, next) {      // 允许访问的域名列表    var originList = ["http://localhost:8020", "https://www.baidu.com", "http://www.google.com"];    // 访问的域名    var reqOrigin = req.headers.origin;    // 判断访问的域名是否在允许访问的域名列表中    if(!!reqOrigin && originList.indexOf(reqOrigin) != -1){        console.log(reqOrigin);        res.header("Access-Control-Allow-Origin", reqOrigin);          res.header("Access-Control-Allow-Headers", "X-Requested-With");          res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");          res.header("X-Powered-By",' 3.2.1')          res.header("Content-Type", "application/json;charset=utf-8");      }    next();  });

  这样我们就可以通过判断访问的域名是否在我们允许的域名列表中，如果存在就允许跨域访问，否则不允许。

  Array.prototype.indexOf() 方法返回在数组中可以找到一个给定元素的第一个索引，如果不存在，则返回-1。

  关于 CORS 的知识可以看看这里。

---

CORS与JSONP比较

• 相比 JSONP 只能发 GET 请求，CORS 允许任何类型的请求。
• JSONP 的优势在于支持老式浏览器（IE浏览器不能低于IE10才能兼容 CORS），以及可以向不支持 CORS 的网站请求数据。

---

服务器代理实现跨域

  因为浏览器端的同源策略才产生了跨域问题，所以我们可以使用服务器代理的方法绕开浏览器端：前端向与自己同源的服务器发起请求，该同源服务器再向不同源的服务器发送请求（请求转发），把同源服务器请求的数据再返回给前端就大功告成了。
  

  首先看看端口号为3000的 node.js 服务器的代码：

/* GET home page. */router.get('/', function(req, res, next) {     res.sendfile('./views/proxy.html');});router.get('/proxy', function(req, res, next) {    var headers = req.headers;    var options = {        host: 'localhost',        port: 5000,        path: '/query',        method: 'GET',        headers: headers        };    // 发起 HTTP 请求    var req = http.request(options, function(res) {        res.setEncoding('utf8');        res.on('data', function (data) {          //从端口号为5000的服务器中获取 data          var data = JSON.parse(data);          //获取数据后传回浏览器          success(data);        });    });     req.on('error', function(e){       console.log("problem with request:" + e.message);    });    req.end();    //获取数据后传回浏览器    function success(data){        res.send(data);    }});

  当开始服务器后访问http://localhost:3000/，服务器传回一个proxy.html文件给浏览器：

<!--proxy.html--><!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>proxy</title>    </head>    <body>        <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>        <script type="text/javascript">            $.ajax({                type:"get",                url:"http://localhost:3000/proxy",                dataType: "json",                success:function(data){                    console.log(data);                  }            });        </script>    </body></html>

  proxy.html网页中发起 ajax 请求向http://localhost:3000/proxy获取数据，然后端口号为3000的服务器接受到请求后再发起 HTTP 请求获取http://localhost:5000/query的数据。
  显然，网页和端口号为3000的服务器就是同源的，这样子 ajax 请求肯定没问题，而且因为服务器端之间不存在跨域问题，所以端口号为3000的服务器向端口号为5000的服务器发送请求也没问题。
  再来看看端口号为5000的 node.js 服务器的代码：

router.get('/query', function(req, res, next) {    var data = {        "name": "kaelyn"    }    res.json(data);});

  就这样，当我们启动两个服务器后，打开浏览器访问http://localhost:3000/，就可以看到在控制台上打印出了返回的数据，这就是通过服务器代理解决跨域问题的方法。

关于 node.js 的 http.request 方法的知识可以看看这里。