前端開發中經常會碰到各種跨域問題,在此做一總結。
實驗**:
先來講講什麼是跨域?
dom同源策略:禁止對不同源頁面dom進行操作。這裡主要場景是iframe跨域的情況,不同網域名稱的iframe是限制互相訪問的。
只要協議,主機名,埠任意乙個不同都認為是不同源的,此時相互呼叫就會造成跨域。
那麼為什麼設計之初不允許跨域操作呢? 其實也很簡單,這是因為安全問題。
暫時不作詳解, 後續補充.
既然跨域有問題, 我們都在乙個網域名稱下呼叫不就行了嗎?
話說我覺得這想法真是一點都沒錯。 可是啊, 可是,美好的東西好像都要有個可是。
實際中我們經常有這樣的需要,a網域名稱下要呼叫b網域名稱下的介面,然而有可能b網域名稱還不是我們自己公司的,不能隨便改。
就算自己公司有多個網域名稱,也經常存在著跨域的api呼叫,可能企業是為了有的服務單獨部署, 功能單一強大穩定一些。
總之,我們就是有跨域操作的需求!
下面對於最常見的跨域現象(ajax呼叫)做實驗, 解析並給出相應的解決方法.
cors倉庫下的img目錄有一些測試時的截圖
自己也可以開啟頁面和控制台觀察
介面所在主機為a.test.com, 以下簡稱為a, 請求的網域名稱為b.test.com, 以下簡稱為b, 且埠不一致.
已經構成跨域.
公用**:
var baseurl = ''; // 介面所在伺服器
ajax跨域問題一般通過jsonp或者服務端新增cors頭就能解決絕大多數的情況, 第三方介面跨域呼叫可以採用**介面的方法.
歡迎補充指正!
跨域Ajax解決方案
客戶端web頁面使用ajax訪問跨域url時,會被瀏覽器捕獲,一般瀏覽器會給安全提示。這樣顯然使用者使用就不是太方便。這裡提供一種可以跨域的訪問方式,但本質上並不是真的跨域,而是使用http 將跨域url轉化為本域url。具體做法是這樣的 1 編寫乙個頁面proxy.jsp,在頁面中把要訪問的跨域u...
AJAX跨域解決方案
從ajax誕生那天起,xmlhttprequest物件不能跨域請求的問題就一直存在,這似乎是乙個很經典的問題了,是由於j ascript的同源策略所導致。解決的辦法,大概有如下幾種 1.使用中間層過渡的方式 可以理解為 2.使用 script 標籤 這個方法是利用 script 標籤中的src來qu...
ajax跨域問題總結 解決方案
跨域產生的原因 1.瀏覽器限制 2.跨域 3.xhr xmlhttprequest 請求 解決思路 1.瀏覽器 不可行 2.xhr請求 jsonp 限制太多 3.跨域 a.被呼叫方 修改被呼叫方支援跨域 b.呼叫方 ngix做 方案具體 1.瀏覽器 啟動chrome.exe時候先在管理員的cmd呼叫...