同源策略&跨域

2020-03-08  本文已影响0人  fly_198e

跨域

修改本机host

  1. 以管理员身份进入CMD。右键开始菜单，选择“命令提示符（管理员）（A）。
  2. 输入命令“cd C:\Windows\System32\Drivers\etc"，回车，进入hosts文件目录。
  3. 输入命令“notepad hosts"，回车，用记事本打开hosts。
  4. 修改对应内容后保存即可。

同源策略（some origin policy）

本域指的是：

不同源的例子:

跨域的几种方法

JSONP：

<body>
  <div class="container">
    <ul class="news">
    </ul>
    <button class="show">show news</button>
  </div>
</body>
<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 $(selector) {
    return document.querySelector(selector);
  }


</script>

/* 跨域 */
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);
  /* console.log(pathObj) */

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)

res.setHeader('content-Type','text/json;charset=utf-8')
  1. 它支持 GET 请求而不支持 POST 等其它类行的 HTTP 请求。
  2. 它只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面或 iframe 之间进行数据通信的问题
  3. JSONP从其他域中加载代码执行，如果该域不安全并且夹带一些恶意代码，会存在安全隐患
  4. 要确定JSONP请求是否失败并不容易

CORS：

<body>
  <div class="container">
    <ul class="news">
    </ul>
    <button class="show">show news</button>
  </div>
</body>
<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>';
  }
  console.log(html);
  $('.news').innerHTML = html;
  }

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

</script>

/* 跨域 */
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 = [
      "第11日前瞻：中国冲击4金 博尔特再战200米",
      "正在直播柴飚//洪炜出战 男双力争会师决赛",
      "女排将死磕巴西!郎平安排男陪练模仿对方核心"
    ]
   /*  res.setHeader('Access-Control-Allow-Origin','http://localhost:8080') */
    res.setHeader('Access-Control-Allow-Origin','*');
    res.setHeader('content-Type','text/json;charset=utf-8')
    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)
  1. 使用简单方便，更为安全
  2. 支持 POST 请求方式
  3. CORS 是一种新型的跨域问题的解决方案，存在兼容问题，仅支持 IE 10 以上

降域：

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <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">
    <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>
</body>
<script>
  document.querySelector('.main input').addEventListener('input', function() {
    console.log(this.value);
    window.frames[0].document.querySelector('input').value = this.value;
  })

  document.domain = "jrg.com";
  var doma = document.domain;
  console.log(doma)

</script>

-b.html:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html,body {
      margin: 0;
    }
    input {
      margin: 20px;
      width: 200px;
    }
  </style>
</head>
<body>
  <input id="input" type="text" placeholder="http://b.jrg.com:8080/b.html">
</body>
<script>
  document.querySelector('#input').addEventListener('input',function() {
    window.parent.document.querySelector('input').value = this.value;
  })

 document.domain = "jrg.com"

</script>

postMessage

上一篇 下一篇

猜你喜欢

热点阅读