跨域方法

1、JSONP方式实现跨域

• JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，老式浏览器全部支持，服务器改造非常小。
  它的基本思想是，网页通过添加一个<script>元素，向服务器请求JSON数据，这种做法不受同源政策限制；服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

<div>
    <ul class="content"></ul>
  </div>
  <div class="btn">
    <button>获取天气</button>
  </div>
  <script>
    var btn = document.querySelectorAll('.btn button')[0]
    var ul = document.querySelectorAll('.content')[0]
    btn.addEventListener('click', function () {
      var script = document.createElement('script')
      script.src = '//a.jrg.com/getNews?callback=appendHtml'
      document.head.appendChild(script)
    })

    function appendHtml(str) {
      var html = '';
      for (var i = 0; i < str.length; i++) {
        html += '<li>' + str[i] + '</li>'   
      }
      ul.innerHTML = html
    }
  </script>

var http = require('http')
var fs = require('fs')
var path = require('path')
var url = require('url')

var server = http.createServer(function (req, res) {
  var news = [
    '你在的哈佛撒酒疯第三轮卡发动机撒大丰收的高发地告诉对方感到十分',
      '今天也un寡凫单鹄个地方经济挂号费的话的好过分的话换个地方换个地方',
      '国风塑try投入犹太人一头热一头热英特尔亚特亚特英特尔亚特日',
      '进口库伊uytiupsdgfdsytyeryreyterytrgfdgfdsgdfsgfdshgfshgfh',
      '今天也un寡凫单鹄个地方经济挂号费的话的好过分的话换个地方换个地方',
      '各方当事公司范德萨各方当事官方上各方当事官方是高仿时光飞逝桂丰大厦官方'
  ]
  var data = []
  for (var i = 0; i < 3; i++) {
    var index = parseInt(Math.random() * news.length)
    data.push(news[index]);
    news.splice(index, 1)
  }

  var pathObj = url.parse(req.url, true)
  switch (pathObj.pathname) {
    case '/getNews':
      res.setHeader('Content-Type', 'text/json,charset="utf-8')
      console.log(pathObj.query.callback)
      if (pathObj.query.callback) {
        res.end(pathObj.query.callback + '(' + JSON.stringify(data) + ')')
      } else {
        res.end(JSON.stringify(data))
      }
      break;
    default:
      fs.readFile(__dirname + pathObj.pathname, 'binary', function (e, content) {
        if (e) {
          res.setHeader('404', 'not found')
          res.end('404 not found')
        } else {
          res.end(content, 'binary')
        }
      })
  }
})
server.listen(80)
console.log('监听成功，打开这个地址')

2、CORS方式实现跨域

• CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。
  整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
  因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

<div>
    <ul class="content"></ul>
  </div>
  <div class="btn">
    <button>获取天气</button>
  </div>
  <script>
    function $(e) {
      return document.querySelectorAll(e)
    }
    $('.btn button')[0].addEventListener('click', function () {
      var xhr = new XMLHttpRequest()
      xhr.open('get', 'http://b.jrg.com:8080/getNews', true)
      xhr.send()
      xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            console.log(xhr.responseText)
            doSomething(JSON.parse(xhr.responseText))
          }
        }
      }
    })
    function doSomething(str) {
      var fragment = document.createDocumentFragment()
      for (var i = 0; i < str.length; i++) {
        var li = document.createElement('li')
        fragment.appendChild(li)
        li.innerText = str[i]
      }
      $('.content')[0].appendChild(fragment)
    }
  </script>

var http = require('http')
var fs = require('fs')
var path = require('path')
var url = require('url')

var server = http.createServer(function(req,res){
    var news = [
      '你在的哈佛撒酒疯第三轮卡发动机撒大丰收的高发地告诉对方感到十分',
      '今天也un寡凫单鹄个地方经济挂号费的话的好过分的话换个地方换个地方',
      '国风塑try投入犹太人一头热一头热英特尔亚特亚特英特尔亚特日',
      '进口库伊uytiupsdgfdsytyeryreyterytrgfdgfdsgdfsgfdshgfshgfh',
      '今天也un寡凫单鹄个地方经济挂号费的话的好过分的话换个地方换个地方',
      '各方当事公司范德萨各方当事官方上各方当事官方是高仿时光飞逝桂丰大厦官方'
    ]
    var data = []
    for (var i = 0; i < 3; i++) {
      var index = parseInt(Math.random()*news.length)
      data.push(news[index]);
      news.splice(index,1)
    }
    res.setHeader('Access-Control-Allow-Origin','http://a.jrg.com:8080')
    var pathObj = url.parse(req.url,true)
    console.log(pathObj.pathname)
    switch(pathObj.pathname) {
      case '/getNews':
      res.end(JSON.stringify(data))
      break;
      default:
      fs.readFile(__dirname + pathObj.pathname,'binary',function(e,content) {
        if(e) {
          res.setHeader('404','not found')
          res.end('404 not found')
        } else {
          res.end(content,'binary')
        }
      })
    }
})
server.listen(8080)
console.log('监听成功，打开这个地址'JSONP)

3、降域

• 在两个父子连个页面的script标签里面添加document.domain= '相同的一级域名'。

<h1>使用降域实现跨域</h1>
  <div class="main">
    <input type="text" placeholder="http://a.jrg.com/a.html">
  </div>
  <iframe src="http://b.jrg.com/b.html" frameborder="1"></iframe>
  <script>
    document.querySelector('.main input').addEventListener('input',function() {
      window.frames[0].document.querySelector('input').value = this.value
    })
  document.domain = 'jrg.com'
  </script>

<div class="ct">
    <input type="text" placeholder="http://b.jrg.com/b.html">
  </div>
  <script>
    document.querySelector('input').addEventListener('input',function() {
      window.parent.document.querySelector('input').value = this.value
    })
    document.domain = 'jrg.com'
  </script>