這篇文章主要介紹了javascript 跨域問題以及解決辦法的相關資料,需要的朋友可以參考下
javascript 跨域問題以及解決方案
什麼是跨域問題?
跨域這個問題是由於瀏覽器的同源策略引起的,請求的URL位址,必須與瀏覽器的URL是相同協定、相同網域名稱、相同連接埠的,否則是不允許訪問的
瀏覽器URL | 要存取的URL | |
---|---|---|
http://www.123.com/index | http://www.123.com/server | |
##http://www.123.com/index | ||
網域不相同,跨網域 | #http://www.123.com:8080/index | |
連接埠不同,跨域 | http://www.123.com/index |
#協議不同,跨域
解決方案
#凡是擁有src屬性的標籤都可以跨域,例如script、img、iframe標籤JSONP
JSONP就是應用了script標籤,JSONP的全名是JSON With Padding,JSONP由兩部分組成,回掉函數和數據,回掉函數就是當回應到來時應該在頁面中呼叫的函數,回掉函數的名字是在請求中指定的,而資料就是傳入回掉函數的JSON資料
範例:
#
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script type="text/javascript"> function jsonCallback(data){ alert(data); }; var url = "http://localhost:8888/test?callback=jsonCallback"; var script = document.createElement('script'); script.type = "text/javascript"; script.setAttribute('src', url); document.getElementsByTagName('head')[0].appendChild(script); </script> </head> <body> </body> </html>
跨網域問題產生的場景
當要在頁面中使用js取得其他網站的資料時,就會產生跨網域問題,例如在網站中使用ajax請求其他網站的天氣、快遞或其他數據介面時以及hybrid app中請求數據,瀏覽器就會提示以下錯誤。這種場景下就要解決js的跨域問題。
XMLHttpRequest cannot load http://你请求的域名. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://当前页的域名' is therefore not allowed access.
一個網站的網址組成包括協議名,子域名,主域名,端口號。例如 https://github.com/ ,其中https是協議名,www是子域名,github是主域名,連接埠號碼是80,當在頁面中從一個url請求資料時,如果這個url的協議名、子網域、主網域、埠號任一個有一個不同,就會產生跨域問題。
即使是在 http://localhost:80/ 頁面請求 http://127.0.0.1:80/ 也會有跨域問題
解決跨域問題
服務端代理程式
服務端設定Request Header頭中Access-Control-Allow-Origin為指定可取得資料的網域名稱 #jsonp的解決方式json≠jsonp######原理#######jsonp解決跨域問題的原理是,瀏覽器的script標籤是不受同源策略限制(你可以在你的網頁中設定script的src屬性問cdn伺服器中靜態檔案的路徑)。那就可以使用script標籤從伺服器取得數據,請求時加入一個參數為callbakc=?,?號時你要執行的回呼方法。 ###以上是關於javascript中跨域問題的解決方法分享的詳細內容。更多資訊請關注PHP中文網其他相關文章!