前端跨域問題

2022-06-19 11:21:08 字數 700 閱讀 6077

例如:a頁面想獲取b頁面資源,如果a,b頁面的協議、埠、子網域名稱不同,所請求的訪問行為都是跨域的,在ajax身上尤其明顯,瀏覽器為了安全問題限制了跨域訪問,也就是不允許跨域請求資源(所有不被允許的跨域訪問,都拒絕)。跨域是瀏覽器的限制,資料其實已經被瀏覽器接收到了,但瀏覽器不予其顯示。這一點很重要,我們在瀏覽器的控制台是能看到跨域傳過來的資料的。

同源策略:是指協議、網域名稱、埠都要相同,其中有乙個不同都會產生跨域,尤其針對ajax。

下面是一些例子,看看不同。對於的同源測試

url結果

原因成功

成功失敗協議不同

失敗埠不通

失敗不同域

同源策略是瀏覽器的乙個安全功能,不同源的客戶端指令碼在沒有明確授權的情況下,不能讀寫對方資源。所以b.com下的js指令碼採用ajax讀取abc.com裡面的檔案資料是會被拒絕的。

同源策略限制了從同乙個源載入的文件或指令碼如何與來自另乙個源的資源進行互動。這是乙個用於隔離潛在惡意檔案的重要安全機制。

不受同源策略限制的

1.頁面中的鏈結,表單重定向提交表單是不受同源限制的。

2.使用html標籤引入外部js不受同源限制。

目前前端程式設計師解決同源策略這一問題的其中一種方法是使用 jsonp這一技術。利用標籤可以跨域的特點,解決ajax不能跨域的問題,雖然官方並沒有相關規定、也沒有出版任何文章承認這一技術,可在行業內這一技術確實被經常使用的,官方也是默許的。

前端跨域問題

雖然羅列這麼多,但是我只用過一種 1 jsonp 2 document.domain iframe 3 location.hash iframe 4 window.name iframe 5 postmessage 6 跨域資源共享 cors 7 nginx 8 nodejs中介軟體 9 webso...

前端跨域問題

一 瀏覽器設定跨域 1,mac下chrome瀏覽器跨域 在終端中輸入以下命令 yourname是自己本機使用者名稱 開啟的chrome有 disable web security 相關的提示,說明瀏覽器設定跨域成功。2,window下chrome跨域 這個簡單了,直接右擊選擇chrome的屬性,在快...

前端跨域問題

1.最常見的jsonp跨域 原理 並提供乙個 函式來接收資料 函式名可約定,或通過位址引數傳遞 第三方產生的響應為json資料的包裝 故稱之為jsonp,即json padding 形如 callback 這樣瀏覽器會呼叫callback函式,並傳遞解析後json物件作為引數。本站指令碼可在call...