跨域的几种方式及原理

跨域是什么

同源策略

• 浏览器出于安全方面的考虑只允许本域下的接口交互，不同源的客户脚本在无明确授权下不能读写对方资源，其中本域是指：

1. 同协议如都为http；
2. 同域名，如a.hhh.com和b。haha.com不是同域名；
3. 同端口，如都为80端口

跨域实现的几种方式

JSONP方式

• 此方式原理是在页面上预先声明一个函数，通过

  服务器文件则是：

  var http = require('http');
  var fs = require('fs');
  var path = require('path');
  var url = require('url');
  
  http.createServer(function(req,res){
   var pathObj = url.parse(req.url,true);
    switch (pathObj.pathName){
      case '/getweather':
        var weather = [
          "广州',
          "天气"，
          "晴天"
        ]
        res.setHeader('content-type','text/json,charsetutf-8')
        if(pathObj.query.collback){
          res.end(pathObj.query.collback + '(' + JSON.stringify(weather) + ')')
        }else{
          res.end(JSON.stringify(weather))
        }
        break
    }
    default:
    fs.readFile(path.join(__dirname,pathObj.pathName),function(err,data){
      if(err){
        res.end('
  404 Not Found
  ')
      }else{
        res.end(data)
      }
    })
  });
  server.listen(8080)
  

  CORS方式

  • 此方式原理是根据浏览器在发送ajax请求时发现不是同源的情况下会在请求头中加入Origin，我们在服务器若发现此请求头，根据预先允许获得数据的域名判断，允许的域名在返回时数据时会加入一个Access-Contro-Allow-Origin的响应头，浏览器如果发现响应头Origin有值则会拿到数据，如果没有则会直接驳回。所以此方式的ajax请求不会有任何改变，只需服务端写入即可
  • 演示如下

  
  
  
    
    
    
  
  
    
  
      
  城市
      
  深圳
      
  多云
      其它城市
    
    
  
  
  

  可以看出来上面的html是完全正常的，正常的发送ajax请求。
  服务器端则是

  var http = require('http');
  var fs = require('fs');
  var path = require('path');
  var url = require('url');
  
  http.createServer(function(req,res){
   var pathObj = url.parse(req.url,true);
    switch (pathObj.pathName){
      case '/getweather':
        var weather = [
          "广州',
          "天气"，
          "晴天"
        ]
        res.setHeader('Access-Contro-Allow-Origin','http://locahost:8080')      
        res.end(JSON.stringify(weather))
        break
    }
    default:
    fs.readFile(path.join(__dirname,pathObj.pathName),function(err,data){
      if(err){
        res.end('
  404 Not Found
  ')
      }else{
        res.end(data)
      }
    })
  });
  server.listen(8080)
  

  此方式最仅需改动服务端即可实现。是一种较好的实现方式。

  降域方式

  • 此方式原理是利用document.domain = '相同的域名部分'实现有条件的跨域效果，其前提条件就是含有相同的域名，实现如同在本域内之间访问的效果
    -实现演示

  a.html
  
  
  
  b.html
  
  
  

  POST Message方式

  • 实现如下

  a.html