美文网首页前端笔记我爱编程饥人谷技术博客
跨域

跨域

作者: 好奇男孩 | 来源:发表于2018-04-08 18:53 被阅读8次

同源策略(Same origin Policy)

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

本域指的是？

不同源的例子：

注意:

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<h1>hell world</h1>
<script>
    var xhr = new XMLHttpRequest();
    xhr.open('get','http://localhost:3646/getWeather',true);
    xhr.send();
    xhr.onload = function () {
        console.log(xhr.responseText)
    }
</script>
</body>
</html>
image.png 13.png

不同源，ajax发送请求，请求虽然响应了，但是浏览器觉得不安全，浏览器不接收响应。

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)
    console.log("hello");
    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(3646)
console.log('http:://localhost:3646')
14.png
15.png

同源请求资源成功

跨域的几种方法

JSONP

HTML 中 script 标签可以加载其他域下的js，比如我们经常引入一个其他域下线上cdn的jQuery。那如何利用这个特性实现从其他域下获取数据呢？
可以先这样试试：

<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 需要对应接口的后端的配合才能实现。

<!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:3647/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>

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(3647)

打开终端，输入 node index2.js ，浏览器打开 http://localhost:3647/news.html

16.png

CORS

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<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:3648/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>
</body>
</html>


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:3648')
            //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(3648)
console.log('http:://localhost:3648')

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

17.png

降域

当网页内嵌套iframe内联框架时，当框架内加载非同源URL时，框架外不可对其进行DOM操作。


18.png 
document.domian="***.com";

实现降域，只有后面域名端口号一致就是通过js操作其DOM，获取其数据；

<html>
<head>
  <meta charset="utf-8">

<style>
  .ct{
    width: 910px;
    margin: auto;
  }
  .main{
    float: left;
    width: 450px;
    height: 300px;
    border: 1px solid #ccc;
  }
  .main input{
    margin: 20px;
    width: 200px;
  }
  .iframe{
    float: right;
  }

  iframe{
    width: 450px;
    height: 300px;
    border: 1px dashed #ccc;
  }
</style>
</head>
<div class="ct">
  <h1>使用降域实现跨域</h1>
  <div class="main">
    <input type="text" placeholder="http://a.com:8080/a.html">
  </div>

  <iframe src="http://b.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>
</html>

postMessage

<html>
<head>
  <meta charset="utf-8">
<style>
    .ct{
        width: 910px;
        margin: auto;
    }
    .main{
        float: left;
        width: 450px;
        height: 300px;
        border: 1px solid #ccc;
    }
    .main input{
        margin: 20px;
        width: 200px;
    }
    .iframe{
        float: right;
    }

    iframe{
        width: 450px;
        height: 300px;
        border: 1px dashed #ccc;
    }
</style>
</head>
<body>
<div class="ct">
    <h1>使用postMessage实现跨域</h1>
    <div class="main">
        <input type="text" placeholder="http://a.jrg.com:8080/a.html">
    </div>

    <iframe src="http://localhost:8080/b.html" frameborder="0" ></iframe>

</div>


<script>
//URL: http://a.jrg.com:8080/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);
}

</body>

</script>
</html>

作者：彭荣辉
链接：https://www.jianshu.com/u/0f804364a8a8
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

相关文章

网友评论

    本文标题：跨域

    本文链接：https://www.haomeiwen.com/subject/irgyhftx.html

    延伸阅读

    深度阅读

    • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

    栏目导航

    热点阅读

    前端笔记

    我爱编程

    饥人谷技术博客

    关于我们|服务条款|联系我们|跨域|投稿指南|网站地图|RSS订阅|排版工具|手机版

    提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

    Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

    备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

    本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

    所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！