碼上歡樂
相關內容    簡體    繁體

谷歌通過ajax獲取本地JSON文件，為什么會提示跨域？

本文轉載自   查看原文   2018-05-21 21:07   7447 
在本地寫了一段JSON代碼，然后用ajax讀取后，在瀏覽器打開，發現谷歌提示涉及到跨域問題，
但是跨域是由於協議，域名，端口中有一個不同， 才會跨域，我在本地訪問自己的文件，怎么和跨域扯上關系了？？
下面是代碼
 
谷歌瀏覽器
 
 
火狐瀏覽器

 
  
 
       1、為什么會跨域？
              
             要回答跨域，首先要從頭來講。瀏覽器本身存在同源策略。以下理解是我整理網上的總結。
                    協議，域名，端口相同，視為同一個域，一個域內的腳本僅僅具有本域內的權限，可以理解為本域腳本只能讀寫本域內的資源，而無法訪問其它域的資源。這種安全限制稱為同源策略。
          同源策略保證了資源的隔離。一個網站的腳本只能訪問自己的資源，就像操作系統里進程不能訪問另一個進程的資源一樣，如果沒有同源策略，你在網站瀏覽，跳轉其他網頁，然后這個網頁就可以跨域讀取你網站中的信息，這樣整個Web世界就無隱私可言了。這就是同源策略的重要性，它限制了這些行為。當然，在同一個域內，客戶端腳本可以任意讀寫同源內的資源，前提是這個資源本身是可讀可寫的。
             通俗的講，瀏覽器有一個很重要的安全機制，即為同源策略：不用域的客戶端腳本在無明確授權的情況下不能讀取對方資源，跨域也就是不同源。
            
               回答了瀏覽器的同源策略，再回答一下跨域。 
 
                     只要協議，域名，端口有一個不同，就是跨域，
                      ajax請求一個目標地址為非本域（協議，域名，端口任意一個不同）的web資源,就是跨域。
            
                    介紹了瀏覽器同源 策略和跨域問題，接下來，開始回答正題。為什么會跨域?
                            ajax請求一個目標地址為非本域（協議，域名，端口任意一個不同）的web資源,就是跨域。
 
                    2、谷歌瀏覽器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.
   
       說白了就是，由於安全原因瀏覽器不允許跨域訪問，安全機制認為加載本地其他文件是跨域行為。谷歌瀏覽器會跨域失敗，是因為瀏覽器安全機制不允許，而火狐為了方便允許跨域(雖然這樣很不安全)。而且在其他瀏覽器中，出現跨域問題也是這個原因，就是瀏覽器安全機制的原因。
 
 
           3、為什么谷歌不支持跨域？
                            
                          這個問題，網上搜索出來的全是怎么解決的，沒人回答是為什么？或者沒有直接回答。
                         這是因為瀏覽器的安全策略，即禁止ajax訪問本地的文件，這是不安全也是不允許的，舉例的話，就相當於你訪問了一個網站，然后這個網站就可 以讀取到你本地的文件，這種行為是不允許的。
        
 
                  4、怎么解決跨域問題？
 
                  1、前端人員使用的一般是JSONP進行跨域。
  
                  2、項目中使用nginx反向代理。
                  3、修改谷歌瀏覽器的配置。
                  4、在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. })   


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 AJAX 跨域請求 - JSONP獲取JSON數據 [ 轉 ]jquery的ajax和getJson跨域獲取json數據 關於解決ajax調用本地文件時的跨域問題 谷歌chrome瀏覽器本地文件跨域配置不生效 谷歌瀏覽器解決ajax跨域問題 AJAX 跨域請求的解決辦法：使用 JSONP獲取JSON數據 AJAX遠程跨域獲取數據 使用Jsonp方式跨域獲取json 使用Ajax獲取本地json數據 前端跨域問題，以及ajax，jsonp，json的區別
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM