跨域

同源策略(Same Origin Policy)

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

  • 发送的请求和当前所在的页面是同一个域下的话，是可以接受的域名，这是浏览器的安全策略。

同源指的是什么？

不同源的例子：

需要注意的是: 对于当前页面来说页面存放的 JS 文件的域不重要，重要的是加载该 JS 页面所在什么域

修改host的作用

1.|127.0.0.1 a.com
2.|127.0.0.1 b.com

可以浏览器是a.com
端口号是b.com
这样虽然域名不相同，但代表的都是同一个意思

fs.readFile

fs.readFile(path.join(--dirname,pathObj.pathname),function(e,data){
  if(e){ 
    res.writeHead(404,'not found')
    res.end('<h1>404 NOT Found<h1>')
    }else{
        res.end(data)
    }
})

path.join(--dirname,path0bj.pathname)
当前文件夹加上pathname的路径。

三种情况

1.请求没有发出去，直接被浏览器拦截了
2.请求发出去了，服务器没有相应
3.请求发出去了，服务器也响应了，但浏览器收到数据之后发现数据不对，然后被拦截掉了

跨域请求，同源策略

是浏览器的安全策略，符合第三种情况

跨域机制

浏览器不会管你是不是接口，只会关注你是不是同源策略，你不是同源的话

跨域的几种方法

1、JSONP
JSONP是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好。主要利用html中script标签可以引入其他域的js文件，利用这个特性可以实现跨域访问接口，需要后端的支持。实现步骤：
1.定义数据处理函数fun：
2.网页通过添加一个<script>元素，src的地址执行后端接口最后加个参数callback=fun，向服务器请求JSON数据，这种做法不受同源政策限制；
3.服务器收到请求后，将数据放在fun回调函数里传回来,输出fun(data):
4.fun(data)会放到script标签作为js执行，此时会调用fun(data),将data作为参数。
可以先这样试试：

<script src="http://api.jirengu.com/weather.php"></script>

这时候会向天气接口发送请求获取数据，获取数据后做为 js 来执行。 但这里有个问题， 数据是 JSON 格式的数据，直接作为 JS 运行的话我如何去得到这个数据来操作呢？

这样试试：

<script src="http://api.jirengu.com/weather.php?callback=showData"></script>

这个请求到达后端后，后端会去解析callback这个参数获取到字符串showData，在发送数据做如下处理：

之前后端返回数据： {"city": "hangzhou", "weather": "晴天"} 现在后端返回数据： showData({"city": "hangzhou", "weather": "晴天"}) 前端script标签在加载数据后会把 「showData({“city”: “hangzhou”, “weather”: “晴天”})」做为 js 来执行，这实际上就是调用showData这个函数，同时参数是 {“city”: “hangzhou”, “weather”: “晴天”}。 用户只需要在加载提前在页面定义好showData这个全局函数，在函数内部处理参数即可。

<script>
function showData(ret){
console.log(ret);
}
</script>
<script src="http://api.jirengu.com/weather.php?callback=showData"></script>

这就是 JSONP(JSON with padding)，总结一下：

JSONP是通过 script 标签加载数据的方式去获取数据当做 JS 代码来执行 提前在页面上声明一个函数，函数名通过接口传参的方式传给后台，后台解析到函数名后在原始数据上「包裹」这个函数名，发送给前端。换句话说，JSONP 需要对应接口的后端的配合才能实现。

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('<h1>404 Not Found</h1>')
        }else{
          res.end(data)
        }
      }) 
  }
}).listen(8080)

index.html

<!DOCTYPE html>
<html>
<body>
  <div class="container">
    <ul class="news">
    </ul>
    <button class="show">show news</button>
  </div>

<script>

  $('.show').addEventListener('click', function(){
    var script = document.createElement('script');
    script.src = 'http://127.0.0.1:8080/getNews?callback=appendHtml';
    document.head.appendChild(script);
    document.head.removeChild(script);
  })

  function appendHtml(news){
    var html = '';
    for( var i=0; i<news.length; i++){
      html += '<li>' + news[i] + '</li>';
    }
    console.log(html);
    $('.news').innerHTML = html;
  }

  function $(id){
    return document.querySelector(id);
  }
</script>

</html>

打开终端，输入 node server.js ，浏览器打开 http://localhost:8080/index.html

2.CORS
全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求。支持现代浏览器，IE10以上浏览器。CORS需要浏览器和服务器的支持，因此，实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。

当CORS请求满足下面的条件时
1.请求方法是以下三种方法之一：
HEAD
GET
POST
2.HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

基本思想是
1.当使用XMLHttpRequest()发送请求的时候，浏览器发现该请求不符合同源策略，会给该请求的头部信息添加一个origin字段，Origin字段用来说明，本次请求来自哪个源，服务器根据这个值，决定是否同意这次请求。
如果Origin指定的源，不被服务器允许，服务器也会返回正常的HTTP响应，浏览器发现响应头没有包含origin字段，就抛出错误，被onerror回调函数捕获，这种错误状态码无法识别。
2.如果指定的源，被服务器允许，服务器返回响应信息的响应头会包含origin的信息

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('<h1>404 Not Found</h1>')
        }else{
          res.end(data)
        }
      }) 
  }
}).listen(8080)

index.html

<!DOCTYPE html>
<html>
<body>
  <div class="container">
    <ul class="news">

    </ul>
    <button class="show">show news</button>
  </div>

<script>

  $('.show').addEventListener('click', function(){
    var xhr = new XMLHttpRequest()
    xhr.open('GET', 'http://127.0.0.1:8080/getNews', true)
    xhr.send()
    xhr.onload = function(){
      appendHtml(JSON.parse(xhr.responseText))
    }
  })

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

  function $(selector){
    return document.querySelector(selector)
  }
</script>

</html>

启动终端，执行 node server.js ，浏览器打开 http://localhost:8080/index.html ,查看效果和网络请求

3、降域（document.domain）
document.domain用于主域相同子域不同的场景
降域的设置也是有限制的，只能把document.domain，设置成自身或者更高一级的域，且主域必须相同，如：a.b.test.com中的某个文档的域可以设置成a.b.test.com、b.test.com、test.com。但是不可以设置成.com或者c.a.b.test.com或者baidu.com，因为baidu.com主域和当前域不同了。

4、postMessage
postMessage是html5新增的方法，可以实现跨文本档、多窗口、跨域消息传递。该方法可以通过绑定window的message事件来监听发送跨文档消息传输内容。postMessage(data,origin)方法接受两个参数：
1.data:要传递的数据。
2.origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，这个参数是为了安全考虑postMessage()方法只会将message传递给指定窗口，如果设置为"*"，这样可以传递给任意窗口。

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 跨域
    1.同源策略(Same origin Policy) 浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的...
    好奇男孩阅读 345评论 0赞 2
  • JS不可缺少--跨域
    浏览器基于安全（用户隐私）考虑，不允许不同域名的网站之间互相调用ajax，只是不允许ajax，其他的还是允许的。但...
    学的会的前端阅读 680评论 0赞 3
  • 跨域的几种实现方式与原理
    在实际工作中，遇到前后端进行数据交互，经常会碰到请求跨域，今天就来探讨一下什么是跨域以及跨域的几种实现方式！ 什么...
    缺月楼阅读 2,568评论 0赞 7
  • #hello，JS：15 同源策略 & 跨域(JSONP)
    跨域有几种常见的方式？你有没有跨域使用的经验？ 方式： 使用jsonp实现跨域？使用cors实现跨域？浏览器另类的...
    饥人谷_远方阅读 506评论 0赞 1
  • 跨域
    一、同源策略(Same origin Policy) 浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的...
    5吖阅读 820评论 0赞 0