• <var id="gzb7d"><strong id="gzb7d"></strong></var>
    <td id="gzb7d"></td>

    1. <acronym id="gzb7d"></acronym>
      瀏覽器部落:-綠色安全純凈官方版!

      CORS跨域的深入理解(代碼示例)

      時間:2021-3-25作者:未知來源:瀏覽器部落人氣:

      網頁的本質就是超級文本標記語言,通過結合使用其他的Web技術(如:腳本語言、公共網關接口、組件等),可以創造出功能強大的網頁。因而,超級文本標記語言是萬維網(Web)編程的基礎,也就是說萬維網是建立在超文本基礎之上的。超級文本標記語言之所以稱為超文本標記語言,是因為文本中包含了所謂“超級鏈接”點。
      本篇文章給大家帶來的內容是關于CORS跨域的深入理解(代碼示例),有一定的參考價值,有需要的朋友可以參考一下,希望對你有所幫助。

      面試問到數據交互的時候,經常會問跨域如何處理。大部分人都會回答JSONP,然后面試官緊接著就會問:“JSONP缺點是什么啊?”這個時候坑就來了,如果面試者說它支持GET方式,然后面試官就會追問,那如果POST方式發送請求怎么辦?基礎扎實一些的面試者會說,使用CORS跨域,不扎實的可能就搖搖頭了。

      這還沒結束,如果公司比較正規或者很在乎技術功底,你面試的又是重要崗位,HR還想砍你的工資,就會再補一刀,CORS跨域有什么問題呢?這時候能回答上來的就沒幾個了,就算是你答出來兼容性不好,需要IE10+瀏覽器,對方依然有話說,那兼容性怎么處理呢?應試者就沒話了,要么被Pass掉,即便留下來,談工資的時候就沒底氣了。

      CORS跨域實在是面試官pass一個人的利器。

      為什么會這樣呢?

      1.遇到CORS請求的情況不多,開發者使用這個場景的很少,大部分都JSONP搞定了。

      2.開發者自身技能不扎實,偷懶心態,平常沒有意識和意愿去提升自己的技術水平。

      3.相關的學習資料少、純前端小白搭建可測試的環境難度大。

      面對這條攔路虎,我們今天就徹底解決掉它,讓它不再是我們的軟肋,而是彰顯我們技術實力的亮點。

      首先,什么是CORS?

      345822829-5bfbcd1d2310c_articlex.jpg

      CORS是一個W3C標準,全稱是"跨域資源共享"(Cross-origin resource sharing)。
      它允許瀏覽器向跨源服務器,發出XMLHttpRequest請求,從而克服了AJAX只能同源使用的限制。

      優缺點

      優點:

      1.支持POST以及所有HTTP請求
      2.安全性相對JSOP更高
      3.前端要做的事兒比較少

      缺點:

      1.不兼容老版本瀏覽器,如IE9及其以下
      2.需要服務端支持
      3.使用起來稍微復雜了些

      怎么用?

      前端部分:

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <meta name="viewport" content="width=device-width, initial-scale=1.0">
          <meta http-equiv="X-UA-Compatible" content="ie=edge">
          <title>CORS跨域請求</title>
          <script>
              function createCORSRequest(method, url) {
                  var xhr = new XMLHttpRequest();
                  if ("withCredentials" in xhr) {
                      xhr.open(method, url, true);
                  } else if (typeof XDomainRequest != "undefined") {
                      xhr = new XDomainRequest();
                      xhr.open(method, url);
                  } else {
                      xhr = null;
                  }
                  return xhr;
              }
      
              window.onload = function () {
                  var oBtn = document.getElementById('btn1');
                  oBtn.onclick = function () {
                      var xhr = createCORSRequest("get", "http://wpdic.com/cors.php");
                      if (xhr) {
                          xhr.onload = function () {
                              var json = JSON.parse(xhr.responseText);
                              alert(json.a);
                          };
                          xhr.onerror = function () {
                              alert('請求失敗.');
                          };
                          xhr.send();
                      }
                  };
              };
          </script>
      </head>
      <body>
          <input type="button" value="獲取數據" id="btn1">
      </body>
      </html>

      注意點:

      1.上面代碼兼容IE8,因為用了XDomainRequest

      2.其它代碼你就當成XMLHttpRequset用,別考慮什么2.0不2.0的

      3.如果你想post數據,可以往 xhr.send()里面搞

      4.這里不建議大家研究"simple methdod"之類的知識,代碼弄懂了會用就行,遇到問題了再查也不晚

      后臺部分:

      <?php
      header('content-type:application:json;charset=utf8');
      header('Access-Control-Allow-Origin:*');
      header('Access-Control-Allow-Methods:GET,POST');
      header('Access-Control-Allow-Credentials: true');
      header('Access-Control-Allow-Headers:x-requested-with,content-type');
      $str = '{"a":1,"b":2,"c":3,"d":4,"e":5}'; 
      echo $str;
      ?>

      注意點:

      1.Access-Control-Allow-Origin: 表示允許任何域名跨域訪問,如果需要指定某域名才允許跨域訪問,只需把Access-Control-Allow-Origin:改為Access-Control-Allow-Origin:允許的域名,實際工作也要這么做2.Access-Control-Allow-Methods:GET,POST 規定允許的方法,建議控制嚴格些,不要隨意放開DELETE之類的權限

      2.Access-Control-Allow-Credentials

      該字段可選。它的值是一個布爾值,表示是否允許發送Cookie。默認情況下,Cookie不包括在CORS請求之中。設為true,即表示服務器明確許可,Cookie可以包含在請求中,一起發給服務器。這個值也只能設為true,如果服務器不要瀏覽器發送Cookie,刪除該字段即可。

      最后,面試常考問題:

      CORS和JSONP的應用場景區別?

      CORS要求瀏覽器(>IE10)和服務器的同時支持,是跨域的根本解決方法,由瀏覽器自動完成。優點在于功能更加強大支持各種HTTP Method,缺點是兼容性不如JSONP。

      以上就是CORS跨域的深入理解(代碼示例)的詳細內容,更多請關注php中文網其它相關文章!


      網站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產和維護的網站。




      關鍵詞:CORS跨域的深入理解(代碼示例)




      Copyright © 2012-2018 瀏覽器部落(http://www.atelierescobar.com) .All Rights Reserved 網站地圖 友情鏈接

      免責聲明:本站資源均來自互聯網收集 如有侵犯到您利益的地方請及時聯系管理刪除,敬請見諒!

      QQ:1006262270   郵箱:kfyvi376850063@126.com   手機版 

      国产乱子伦漫画,猫咪www免费人成在线观看,国产真实哺乳吃奶在线观看,超乳专区爆乳国产