谷歌經過ajax獲取本地JSON文件，爲何會提示跨域？

時間  2019-11-10
標籤 谷歌 經過 ajax 獲取 本地 json 文件 爲何 提示 欄目 Chrome 简体版
原文   原文鏈接
在本地寫了一段JSON代碼，而後用ajax讀取後，在瀏覽器打開，發現谷歌提示涉及到跨域問題，
可是跨域是因爲協議，域名，端口中有一個不一樣， 纔會跨域，我在本地訪問本身的文件，怎麼和跨域扯上關係了？？
下面是代碼
 
谷歌瀏覽器
 
 
火狐瀏覽器

 
  
 
       一、爲何會跨域？
              
             要回答跨域，首先要從頭來說。瀏覽器自己存在同源策略。如下理解是我整理網上的總結。
                    協議，域名，端口相同，視爲同一個域，一個域內的腳本僅僅具備本域內的權限，能夠理解爲本域腳本只能讀寫本域內的資源，而沒法訪問其它域的資源。這種安全限制稱爲同源策略。
          同源策略保證了資源的隔離。一個網站的腳本只能訪問本身的資源，就像操做系統裏進程不能訪問另外一個進程的資源同樣，若是沒有同源策略，你在網站瀏覽，跳轉其餘網頁，而後這個網頁就能夠跨域讀取你網站中的信息，這樣整個Web世界就無隱私可言了。這就是同源策略的重要性，它限制了這些行爲。固然，在同一個域內，客戶端腳本能夠任意讀寫同源內的資源，前提是這個資源自己是可讀可寫的。
             通俗的講，瀏覽器有一個很重要的安全機制，即爲同源策略：不用域的客戶端腳本在無明確受權的狀況下不能讀取對方資源，跨域也就是不一樣源。
            
               回答了瀏覽器的同源策略，再回答一下跨域。 
 
                     只要協議，域名，端口有一個不一樣，就是跨域，
                      ajax請求一個目標地址爲非本域（協議，域名，端口任意一個不一樣）的web資源,就是跨域。
            
                    介紹了瀏覽器同源 策略和跨域問題，接下來，開始回答正題。爲何會跨域?
                            ajax請求一個目標地址爲非本域（協議，域名，端口任意一個不一樣）的web資源,就是跨域。
 
                    二、谷歌瀏覽器JSON出現了跨域問題，火狐JSON能夠看到數據。這是爲何？
 
                             既然跨域失敗，就要找緣由。這很簡單，跨域的三要素， 協議，域名，端口。確定有一個不同，才致使跨域問題的出現。
                             讀取本地JSON代碼，火狐能夠正常讀取到本地的JSON文件，
                           緣由是：雖然容許跨域很不安全，可是若是不跨域的話又帶來不少不便。因此火狐是容許跨域的。
 
                            那麼谷歌是怎麼回事，爲何谷歌獲取不到，會出現跨域的問題？
                            這裏要提一點，訪問本地計算機中的文件，使用的是 file協議
                           file協議主要用於訪問本地計算機中的文件，就如同在Windows資源管理器中打開文件同樣，注意它是針對本地（本機）的，簡單來講，file協議是訪問你本機的文件資源。
                          這麼看來，谷歌報錯的緣由已經很清楚了，控制檯能夠明顯看到
 
Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
 
跨源請求僅支持協議方案。 ：http, data, chrome, chrome-extension, https.
   
       說白了就是，因爲安全緣由瀏覽器不容許跨域訪問，安全機制認爲加載本地其餘文件是跨域行爲。谷歌瀏覽器會跨域失敗，是由於瀏覽器安全機制不容許，而火狐爲了方便容許跨域(雖然這樣很不安全)。並且在其餘瀏覽器中，出現跨域問題也是這個緣由，就是瀏覽器安全機制的緣由。
 
 
           三、爲何谷歌不支持跨域？
                            
                          這個問題，網上搜索出來的全是怎麼解決的，沒人回答是爲何？或者沒有直接回答。
                         這是由於瀏覽器的安全策略，即禁止ajax訪問本地的文件，這是不安全也是不容許的，舉例的話，就至關於你訪問了一個網站，而後這個網站就可 以讀取到你本地的文件，這種行爲是不容許的。
        
 
                  四、怎麼解決跨域問題？
 
                  一、前端人員使用的通常是JSONP進行跨域。
  
                  二、項目中使用nginx反向代理。
                  三、修改谷歌瀏覽器的配置。
                  四、在webstrom中打開。
                  這四種方法，前端人員本地最方便也是最實用的就是第一種，不建議使用第三種方法，你修改了瀏覽器的配置，難道讓用戶也修改瀏覽器的配置嗎。
                 第二種方法，在項目中，會部署 nginx 反向代理，這裏不作具體贅述。有須要的能夠自行查找。
                  第四種方法，用在angula的路由中，webstrom中自帶了一個本地服務器。會自動爲你的文件開一個端口服務。
                  
 
使用jsonp解決跨域 ：（僅適用於GET請求）
實現原理：<script>  標籤是不受同源策略的限制的，它能夠載入任意地方的 JavaScript 文件，而並不要求同源。
因此 JSONP 的理念就是，我和服務端約定好一個函數名，當我請求文件的時候，服務端返回一段 JavaScript。這段 JavaScript 調用了咱們約定好的函數，而且將數據當作參數傳入。很是巧合的一點（其實並非），JSON 的數據格式和 JavaScript 語言裏對象的格式正好相同。因此在咱們約定的函數裏面能夠直接使用這個對象。

                   
                  直接上代碼
 
[html] view plain copy
 
  1. <!DOCTYPE html>    
  2. <html>    
  3.     <head>    
  4.         <meta charset="UTF-8">    
  5.         <title>JSON文件的調用</title>    
  6. <script type="text/javascript" src="jquery-1.11.2.min.js"></script>    
  7.             
  8.     </head>    
  9.     <body>    
  10.     
  11.     </body>    
  12.         
  13.     <!--引入JS-->    
  14. <script type="text/javascript" src="BW-JSON.js"></script>    
  15.     
  16. <!--jsonp中 須要注意的是    
  17.      <script  src="car.json?callback=train"></script>    
  18.  src ? 以前爲文件地址，? 以後爲回調函數callback名稱，    
  19. 回調函數能夠簡寫爲 cb ,  而後 回調函數 名稱要與  JSON文件中的名稱一致    
  20. 能夠在 對應的文件名中看下，如，car.json?callback=loa,car.json的 函數名爲  train-->    
  21. <script  src="car.json?cb=train"></script>       
  22.     
  23. </html>   
  24.   
  25.   
  26.   
  27. //JS代碼就一個方法    
  28.     function train (result){    
  29.         console.log(result)    
  30.     
  31.    }  
  32.      
  33.    //JSON文件    
  34. train({    
  35.     "status": "success",    
  36.     "trainSystem": [    
  37.         {    
  38.             "key": "BX7",    
  39.             "name": "BX7",    
  40.             "img": ""    
  41.         },    
  42.         {    
  43.             "key": "BX5",    
  44.             "name": "BX5",    
  45.             "img": ""    
  46.         },    
  47.         {    
  48.             "key": "BX6",    
  49.             "name": "BX6",    
  50.             "img": ""    
  51.         }    
  52.     ]    
  53. })   
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程