跨域的4种实现方式

1.使用JSONP实现跨域

HTML代码

  
  
  
    
    
  
  
    

        

        show news
    
  
  
  

server.js

  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 '/getNews':
            var news = [
                "第11日前瞻：中国冲击4金 博尔特再战200米羽球",
                "正直播柴飚/洪炜出战 男双力争会师决赛",
                "女排将死磕巴西！郎平安排男陪练模仿对方核心"
            ];
            res.setHeader('Content-Type','text/json;Charset=utf-8');
            if(pathObj.query.callback){
                res.end(pathObj.query.callback + '(' + JSON.stringify(news) + ')' );
            }else{
                res.end(JSON.stringify(news));
            }
            break;
        default:
            fs.readFile(path.join(__dirname,pathObj.pathname),function(e,data){
                if(e){
                    res.writeHead(404,'not found');
                    res.end('
404 Not Found
');
                }else{
                    res.end(data);
                }
            })
      }
  }).listen(8080);

2.使用CORS实现跨域

html代码

  
  
  
    
    
  
  
    

        

        show news
    
  
  
  

server.js

  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 '/getNews':
            var news = [
                "第11日前瞻：中国冲击4金 博尔特再战200米羽球",
                "正直播柴飚/洪炜出战 男双力争会师决赛",
                "女排将死磕巴西！郎平安排男陪练模仿对方核心"
            ];
            res.setHeader('Access-Control-Allow-Origin','http://localhost:8080');
            //res.setHeader('Access-Control-Allow-Origin','*');
                res.end(JSON.stringify(news));
            break;
        default:
            fs.readFile(path.join(__dirname,pathObj.pathname),function(e,data){
                if(e){
                    res.writeHead(404,'not found');
                    res.end('
404 Not Found
');
                }else{
                    res.end(data);
                }
            })
    }
  }).listen(8080);

3.使用postMessage实现跨域

a.html

  
  
  
    
    
    
  
  
  

    
使用postMessage实现跨域
    

        
    
    
  
  
  
  

b.html

4.使用降域实现跨域

a.html

b.html

  
  
  
    
    
    
  
  
    

      
使用降域实现跨域