js高程第21章提到了ajax 跨域技術,方法有很多,如圖:
我主要講這個:
其實代碼就是這樣就好了,當然只兼容 IE9 及之后的版本 ,IE9 之前的版本請去原書看吧,Page 600
var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function(){ if (xhr.readyState == 4){ if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ alert(xhr.responseText); } else { alert("Request was unsuccessful: " + xhr.status); } } }; xhr.open("get", "http://www.somewhere-else.com/page/", true); xhr.send(null);
但是這有個前提:
那么如何讓服務器返回這個頭部,允許跨域請求呢?下面以 XAMPP 的 Apache 服務器為例!(wamperserver 應該類似,nginx 請拉到最后!)
選擇 Apache (httpd.config),打開
1、找到 LoadModule headers_module modules/mod_headers.so 這個,把前面的 # 刪掉 ,我是本來就沒有 # ,所以就到下一步;
2、找到這個,我是這樣的,可能大家有點不同,
改成這樣:
重點是這個:
Header set Access-Control-Allow-Origin *
*表示允許所有的域訪問,當然這是很危險的, 較為安全的配置,應該是直接指定具體的域名。那么就要用 Header add 不是Header set,否則只有最后一行的配置生效,比如
Header add Access-Control-Allow-Origin "www.b.com" Header add Access-Control-Allow-Origin "www.c.com"
我這里是本地測試,自然用的 * ( 親測可以 ), 指定域名的我沒試,不保證沒問題
但是本人設置 之后,把Apache關掉重啟還是失敗了,結果關機重啟就好了;
nginx 可以參考下文
參考: