实现跨域的方法

不同域下的接口获取数据，可以使用jsonp和cors。（ie10以下可以使用jsonp获取数据）

• jsonp实现跨域。HTML中script标签可以加载其他域下的js
• 例如在页面插入这时候会向天气接口发送请求获取数据，获取数据后作为js来执行。但这里的数据是JSON格式的数据，直接作为JS运行需要用一下方式：
  在页面插入这个请求到达后端后，后端会解析callback这个参数获取到字符串showData，再发送数据做如下处理：showData({"city": "hangzhou", "weather": "晴天"})前端script标签在加载数据后会把showData({"city": "hangzhou", "weather": "晴天"})作为js执行，这实际上就是调用showData这个函数。用户只需要在提前在页面定义好showData这个全局函数，在函数内部处理参数即可。

html:



  

    

    
    show news
  




server:
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)

• cors支持IE10以上
• XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：origin，后台进行一系列处理，如果确定接受请求则在返回加过中加入一个响应头：Acess-Control-Allow-Origin;浏览器判断该响应头中是否包含origin的值，如果有则浏览器会处理响应，如果不包含浏览器直接驳回。

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')    //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)

不同域下的ifram的操作

• 降域 ：域名为http://b.jrg.com:8080/b.html的网页以iframe的形式嵌在域名为http://a.jrg.com:8080/a.html的网页中，他们来自不同的域名，正常情况下不能进行跨域访问。但是当我们为两个页面加上这样一句代码：

document.domain = "jrg.com" 

此时这两个页面位于同一个域名下了，就可以在a页面中对页面b进行操作了，两个页面可以互相访问。但这个方法有个限制，就是两个域名要有相同的部分才可以实现降域。

降域：
a.html




  
使用降域实现跨域
  

    
  

  






########################################
b.html:



    

• postmessage 不需要降域，当需要和页面中的iframe操作时，当需要操作页面中iframe的时候，需要向iframe post一个消息，如果iframe同意修改，会返回给我一个响应

a.html:





    
使用postMessage实现跨域
    

        
    

    







b.html: