关于跨域

2018-11-13 本文已影响0人郑宋君

同源策略

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

同协议：如都是http或者https
同域名：如都是http://jirengu.com/a 和http://jirengu.com/b
同端口：如都是80端口

如：

http://jirengu.com/a/b.js 和 http://jirengu.com/index.php (同源)

不同源的例子：

http://jirengu.com/main.js 和 https://jirengu.com/a.php (协议不同)
http://jirengu.com/main.js 和 http://bbs.jirengu.com/a.php (域名不同，域名必须完全相同才可以)
http://jiengu.com/main.js 和 http://jirengu.com:8080/a.php (端口不同,第一个是80)

发送ajax请求的时候看接口的和浏览器地址栏是否相同
如果不同，如果出现了错误，这个时候的拦截是浏览器做出的行为，并不是服务器做出的行为

首先修改host文件
127.0.0.1 loclahost
比如文件夹下新建两个文件index.html server.js代码如下
html

<h1>hello world</h1>
<script>
    var xhr = new XMLHttpRequest()
    xhr.open('GET','http://localhost:8080/getWeather',true)
    xhr.send()
    xhr.onload = function(){
        console.log(xhr.response)
    }
</script>

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 '/getWeather':
      res.end(JSON.stringify({beijing: 'sunny'}))
      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)

打开命令行开启server.js，在浏览器种输入localhost:8080/index.html

1.png

这个时候我们可以看到控制台打印了server.js返回的数据
现在我们修改浏览器地址，浏览器就变成了

2.png
这个时候就发现浏览器提示错误不允许跨域（浏览器的域名和我们的接口域名虽然是相等的，但是并不是一样的，所以不允许进行操作）

我们如何解决这个问题呢(如何进行跨域呢？)

如何进行跨域呢

cors方式

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

      res.setHeader('Access-Control-Allow-Origin','127.0.0.1:8080')

这个时候我们的域名无论是Localhost还是127.0.0.1可以通过ajax获取到数据
当然我们也可以

      res.setHeader('Access-Control-Allow-Origin','*')

这样我们无论哪个域名向这个接口发送请求都是可以获取到数据的

jsonp方式跨域

HTML 中 script 标签可以加载其他域下的js，比如我们经常引入一个其他域下线上cdn的jQuery。那如何利用这个特性实现从其他域下获取数据呢？这样的话其他域返回的数据我们是把他当成js来执行的，我们可以利用这一点进行跨域获取数据操作,我们再次新建两个文件index.html和server.js
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>

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)

从html代码我我们并没有发送ajax，但是我们使用script标签给http://127.0.0.1:8080/getNews这个路由发送了请求，并传递了数据callback=appendHtml
在server.js种我们判断如果请求有数据这个数据我们就返回数据+信息
但是这个数据加信息这一串字符串我们浏览器接受到了会把他当成js来执行，并不是一串真正的数据，这个时候我们提前定义一个函数，也就是刚才我们发送的数据名，在函数体里面提前写好函数操作，这样返回的数据直接作为参数传递进来使用这个函数，这样就做到了jsnop进行跨域

用降域的方式去跨域

在当前页面下的iframe的域名若与当前页面的域名不同源，则当前页面的js代码对iframe无法进行任何操作。
这是为了保护用户在iframe中登录其他网站或与之类似的相关操作会泄露隐私数据。
比如http://a.jrg.com和http://b.jrg.com,正常情况下，这两个域是不能交换数据的，但是如果通过 document.domain 将二者的域名都设置为jrg.com.那么就可以实现跨域

注意事项：
顶级域名无法降域
不仅当前页面要使用document.domain，iframe的源页面也要使用document.domain
与JSONP、CORS相比，降域主要针对于当前页面下的iframe
举例如下：

// a.html
<body>

    <!-- 
        降域的前提是一级域名相同
     -->
    <div class="ct">
        <h1>使用降域实现跨域</h1>
        <div class="main">
            <input type="text" placeholder='http://a.jrg.com:8080/a.html'>
        </div>

        <iframe src="http://b.jrg.com:8080/b.html" frameborder="0"></iframe>
    </div>


    <script>
        //URL: http://a.jrg.com:8080/a.html

        document.querySelector('.main input').addEventListener('input',function(){
            console.log(this.value);
            window.frames[0].document.querySelector('input').value = this.value;
        })
    
     document.domain = 'jrg.com';
    </script>
</body>

// b.html
<body>
    <input type="text" id="input" placeholder="http://b.jrg.com:8080/b.html">

    <script>
        // URL: http:b.jrg.com:8080/b.html

        document.querySelector('#input').addEventListener('input',function(){
            window.parent.document.querySelector('input').value = this.value;
        })

        document.domain = 'jrg.com';
    </script>
</body>

postMessage方式跨域

window.postMessage() 是HTML5的一个接口，专注实现不同窗口不同页面的跨域通讯。

postMessage(data,origin)方法接受两个参数
1.data:要传递的数据
2.origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写.
举例如下：

<div class="ct">
        <h1>使用postMessage实现跨域</h1>
        <div class="main">
            <input type="text" placeholder="http://a.jrg.com:8080/a.html">
        </div>

        <iframe src="http://b.jrg.com:8080/b.html" frameborder="0"></iframe>
    </div>

    <script>
        // URL:   http://a.jrg.com/a.html
        $('.main input').addEventListener('input',function(){
            console.log(this.value);
            window.frames[0].postMessage(this.value,'*');
        })

        window.addEventListener('message',function(e){
            $('.main input').value = e.data;
            console.log(e.data);
            
        })
    
        function $(id){
            return document.querySelector(id);
        }
    
    </script>

<body>
    <input id='input' type="text" placeholder="http://b.jrg.com/b.html">

    <script>
        //URL http://b.jrg.com:8080/b.html

        $('#input').addEventListener('input',function(){
            window.parent.postMessage(this.value,'*');
        })

        window.addEventListener('message',function(e){
            $('#input').value = e.data;
            console.log(e.data);   
        })

        function $(id) {
                return document.querySelector(id);
            }

    </script>
</body>