一、同源策略与跨域

Ⅰ 什么是同源

相同的协议
相同的域名
相同的端口

Ⅱ 什么是同源策略

指的是浏览器的一种安全机制。浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。

Ⅲ 什么是跨域

简单的来说，就是绕过同源策略获取数据

二、利用CORS实现跨域

Ⅰ 什么是CORS

CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。实现方式很简单，当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别，代码完全一样。

Ⅱ 实现

为了实现该效果，我们在host文件中加入a.com 127.0.0.1和b.com 127.0.0.1

写一个简易服务

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

http.createServer(function(req,res){
  var pathobj = url.parse(req.url,true)
  switch(pathobj.pathname){
    case '/getNews':
      var news = [
        'hello world',
        'hello javascript',
      ]
      res.setHeader('Access-Control-Allow-Origin','http://a.com: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('<h1>404</h1>')
        }
        else{
        res.end(data)
        }
      })
  }
}).listen(8080)

注意到：这里多写了一个响应头res.setHeader('Access-Control-Allow-Origin','http://a.com:8080')

用Ajax请求数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div class="container">
    <ul class="news"></ul>
    <button class="button">button</button>
  </div>
  <script>
    function $(selector){
    return document.querySelector(selector)
    }
    $('.button').addEventListener('click',function(){
      var xhr = new XMLHttpRequest()
      xhr.open('GET','http://a.com:8080/getNews',true)
      xhr.send()
      xhr.onload = function(){
        appendHtml(JSON.parse(xhr.responseText))
      }
    })
    function appendHtml(news){
      var html = ''
      for(var i in news){
        html += '<li>' + news[i] + '</li>'
      }
      $('.news').innerHTML = html
    }
  </script>
</body>
</html>

成功获取了服务器数据