跨域

什么是同源策略

同源策略(same origin policy)，1995年同源政策由 Netscape 公司引入浏览器。目前，所有浏览器都实行这个政策浏览器出于安全方面的考虑，只允许与本域下的接口进行交互。不同源的客户脚本在没有明确授权的情况下，不能读取对方的资源。
同源政策的目的，是为了保证用户信息的安全，防止恶意的网站窃取数据

本域指的是

• 同协议：比如都是 http 或者 https
• 同端口：比如都是 80 端口
• 同域名：比如都是 google.com

什么是跨域？跨域有几种实现形式

跨域是指通过一定方式绕过浏览器同源政策的限制，可以与不同域进行交互
目前学习到四种实现形式：

• JSONP
• CORS
• 降域
• postMessage

JSONP 的原理是什么

jsonp 是一种跨域通信的手段，它的原理其实很简单：

1. 首先是利用 script 标签的 src 属性来实现跨域。
2. 通过将前端方法作为参数传递到服务器端，然后由服务器端注入参数之后再返回，实现服务器端向客户端通信。
3. 由于使用 script 标签的 src 属性，因此只支持 get 方法

CORS是什么

• CORS 是一个 W3C 标准，全称是“跨域资源共享”（Cross-origin resource sharing，它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 AJAX 只能同源使用的限制

• CORS 需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于 IE10。

• 整个 CORS 通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS 通信与同源的 AJAX 通信没有差别，代码完全一样。浏览器一旦发现 AJAX 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信。

参考阮一峰

根据视频里的讲解演示三种以上跨域的解决方式 ，写成博客

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

  

    

    
    show news
  

• CORS

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','*') // 设置响应头中的属性，允许所有的站点访问
      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)

  

    

    
    show news
  

• postMessage
  postMessage 是 HTML5 新增加的一项功能，跨文档消息传输(Cross Document Messaging)，目前：Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 都支持这项功能，使用起来也特别简单

  • 首先创建 a.html

  • 创建 b.html

在浏览器中打开 http://localhos/a.html

postMessage.png

跨域成功
参考：MDN