跨域要求

2024年2月12日 183次阅读 来源: kowalski

什么是跨域请求？

当阅读器实行一个剧本时会搜检是不是同源，只需同源的剧本才会实行，假如差别源即为跨域

什么是同源？

同源即：由Netscape提出的有名平安战略，是阅读器最中心、基础的平安功用,它限定了一个源(origin)中加载文本或许剧本与来自其他源(origin)中资本的交互体式格局
，所谓的同源就是指协定、域名、端口雷同。

只需协定、域名、端口有任何一个差别，都被看成是差别的域，之间的请求就是跨域操纵。

协定？域名？端口？

协定：收集协定普及OSI通信模子（OSI七层模子，经常运用协定有TCP/IP、HTTP、FTP协定等）
域名：Domain Name，网域，是由一串用点分开的名字构成的Internet上某一台盘算机或盘算机组的称号，用于在数据传输时标识盘算机的电子方位（偶然也指地理位置）
端口：是装备与外界通信交换的出口，分为物理端口和假造端口(罕见的如80端口)

相识观点后我们晓得跨域请求就是web阅读器本身不许可在域名、协定、端口等都不雷同的情况下举行页面请求方为，因而作为前端developer在项目开辟时是须要处置惩罚此类题目的！

为何要有这类限定？非同源请求页面会怎样？

想象如许一个情形：A网站是一家银行，用户登录今后，又去阅读其他的网站B，假如网站B能够读取A网站的Cookie,会发作什么题目？
明显，假如Cookie包括隐私（比方存款总额），这些信息就会泄漏，更恐怖的是，Cookie每每用来保留用户的登录状况，假如用户没有退出登录，其他网站就能够冒用户，随心所欲。由于阅读器同时还划定，提交表单不受同源战略的限定。

非同源限定局限

  • Cookie、LocalStorage和IndexDB没法猎取
  • DOM没法取得
  • AJAX请求不能发送

跨域请求处置惩罚方案

1. jsonp:（JSON with Padding是JSON的一种“运用形式”，可用于处置惩罚主流阅读器的跨域数据接见的题目）
道理：网页客户端动态增添<script>标签增添src属性，向服务端发送json请求（不受同源战略约束）服务器收到请求后，将数据放在一个指定名字的回调函数里（作为参数）传返来。

    // 前端请求代码
    //http://127.0.0.1:8888/jsonp.html
var script = document.createElement('script');
      script.src = 'http://127.0.0.1:2333/jsonpHandler?callback=_callback'
      document.body.appendChild(script);      //插进去script标签
      //回调处置惩罚函数 _callback
      var _callback = function(obj){
          for(key in obj){
            console.log('key: ' + key +' value: ' + obj[key]);
          }
      }
// 后端相应代码
//http://127.0.0.1:2333/jsonpHandler
app.get('/jsonpHandler', (req,res) => {
  let callback = req.query.callback;
  let obj = {
    type : 'jsonp',
    name : 'weapon-x'
  };
  res.writeHead(200, {"Content-Type": "text/javascript"});
  res.end(callback + '(' + JSON.stringify(obj) + ')');
})

JSONP只支撑Get请求体式格局

2.CORS:(跨域资本同享)是由W3C制订的跨站资本分享规范，能够让AJAX完成跨域接见,除了 GET 请求要领之外也支撑其他的 HTTP 请求。服务器平常须要增添以下相应头的一种或几种:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Max-Age: 86400

跨域请求默许不会照顾Cookie信息，假如须要照顾，请设置下述参数：

"Access-Control-Allow-Credentials": true
// Ajax设置
"withCredentials": true

3.window.name+iframe:应用iframe标签的跨域才能，window.name属性值在文档革新后照旧存在的才能（且最大许可2M摆布）

<!-- 
 下述用端口 
 10000示意：domainA
 10001示意：domainB
-->

<!-- localhost:10000 -->
<script>
  var iframe = document.createElement('iframe');
  iframe.style.display = 'none'; // 隐蔽

  var state = 0; // 防备页面无穷革新
  iframe.onload = function() {
      if(state === 1) {
          console.log(JSON.parse(iframe.contentWindow.name));
          // 消灭建立的iframe
          iframe.contentWindow.document.write('');
          iframe.contentWindow.close();
          document.body.removeChild(iframe);
      } else if(state === 0) {
          state = 1;
          // 加载完成，指向当前域，防备毛病(proxy.html为空缺页面)
          // Blocked a frame with origin "http://localhost:10000" from accessing a cross-origin frame.
          iframe.contentWindow.location = 'http://localhost:10000/proxy.html';
      }
  };

  iframe.src = 'http://localhost:10001';
  document.body.appendChild(iframe);
</script>

<!-- localhost:10001 -->
<!DOCTYPE html>
...
<script>
  window.name = JSON.stringify({a: 1, b: 2});
</script>
</html>

4.window.name:window对象有个name属性，该属性有个特性：即在一个窗口(window)的生命周期内,窗口载入的一切的页面都是同享一个window.name的，每一个页面临window.name都有读写的权限，window.name是耐久存在一个窗口载入过的一切页面中的，并不会因新页面的载入而举行重置。

<script> //a页面设置
window.name="kowalski";
</script>
<script> //b页面掏出
alert(window.name);
</script>

正在打仗后续补充…

    原文作者：kowalski
    原文地址: https://segmentfault.com/a/1190000013985405
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞