關於javascript中跨域問題的解決方法分享
- 黄舟原創
- 2017-07-18 10:02:191374瀏覽
這篇文章主要介紹了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>缺點：確認JSONP請求是否失敗並不容易安全性的問題，JSONP是從其他網域載入程式碼執行，所以要確定其可靠性產生跨域問題的原因跨域問題是瀏覽器同源策略限制，目前網域的js只能讀取同域下的視窗屬性。
跨網域問題產生的場景
當要在頁面中使用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中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn