跨域请求的含义

感谢：http://web.jobbole.com/87885/

浏览器的同源策略，出于防范跨站脚本的攻击，禁止客户端脚本（如 JavaScript）对不同域的服务进行跨站调用。

一般的，只要网站的 协议名protocol、 主机host、 端口号port 这三个中的任意一个不同，网站间的数据请求与传输便构成了跨域调用。这也是我们下面实践的理论基础。我们利用 NodeJs 创建了两个服务器，分别监听 3000、 3001 端口（下面简称 服务器3000 与 服务器3001 ），由于端口号不一样，这两个服务器以及服务器上页面通信构成了跨域请求。

• 在服务器3000 上有如下的页面：
  

---

• 服务器3000 上的请求页面中包含如下 JavaScript 代码：
  
   

  $(function() {
      $("#submit").click(function() {
          var data = {
              name: $("#name").val(),
              id: $("#id").val()
          };
          $.ajax({
              type: 'POST',
              data: data,
              url: 'http://localhost:3000/ajax/deal',
              dataType: 'json',
              cache: false,
              timeout: 5000,
              success: function(data) {
                  console.log(data)
              },
              error: function(jqXHR, textStatus, errorThrown) {
                  console.log('error ' + textStatus + ' ' + errorThrown);
              }
          });
      });
  });

   

---

• 服务器3000 对应的处理函数为
  
   

  pp.post('/ajax/deal', function(req, res) {
      console.log("server accept: ", req.body.name, req.body.id)
      var data = {
          name: req.body.name + ' - server 3000 process',
          id: req.body.id + ' - server 3000 process'
      }
      res.send(data)
      res.end()
  })

   

---

• 请求页面返回结果：
  
  此处数据处理成功。
  由于数据请求一般都是由页面发送数据字段，服务器根据这些字段作相应的处理，如数据库查询，字符串操作等等。所以我们这里简单的处理数据（在数据后面加上字符串‘server 3000 process’），并且返回给浏览器，表示数据经过服务器端处理。

如果让 服务器3000 上的页面向 服务器 3001 发起请求会怎样呢？

• 将请求页面中的 ajax 请求路径改为：
  
   

  $.ajax({
      ...
      url: 'http://localhost:3001/ajax/deal',
      ...
  });

• 服务器3001 对应的处理函数与 服务器3000 类似：
  
   

  app.post('/ajax/deal', function(req, res) {
      console.log("server accept: ", req.body.name, req.body.id)
      var data = {
          name: req.body.name + ' - server 3001 process',
          id: req.body.id + ' - server 3001 process'
      }
      res.send(data)
      res.end()
  })

• 结果如下：

结果证明了我们上面所说的端口号不同，发生了跨域请求的调用。

• 需要注意的是，服务器 3001 控制台有输出：
  
   

   

  1	server accept:  chiaki 3001

这说明跨域请求并非是浏览器限制了发起跨站请求，而是请求可以正常发起，到达服务器端，但是服务器返回的结果会被浏览器拦截。