■ 河北科技師范學(xué)院 趙學(xué)作 秦皇島市睿訊網(wǎng)絡(luò)科技有限公司 趙少農(nóng)
編者按:瀏覽器從一個域名的網(wǎng)頁去請求另一個域名的資源時,域名、端口、協(xié)議任一不同,都被視為跨域訪問,也就是瀏覽器對于javascript的同源策略的限制。所謂同源策略,即請求的url地址,必須與瀏覽器上的url地址處于同域上,也就是域名,端口,協(xié)議都必須相同。例如a.com下面的js不能調(diào)用b.com中的js、對象或數(shù)據(jù)。本文就跨域的設(shè)置作詳細(xì)介紹。
下面的幾種情況均屬于跨域訪問。
域名不同:主域名不同: http://www.qhdedu.com/index.html訪問http://www.qhdedu.net/1.js
子域名不同:http://www.qhdedu.com/index.html訪問http://w3.qhdedu.com/1.js
域名和域名ip:http://www.qhdedu.com/index.html訪 問http://106.75.53.220/1.js
端口不同:
http://www.qhdedu.com:8080/index.html訪問http://www.qhdedu.com:8081/1.js
協(xié)議不同:
http://www.qhdedu.com:8080/index.html訪問https://www.qhdedu.com:8080/1.js
圖1 IIS中HTTP響應(yīng)頭
允許跨域訪問會帶來許多安全性的問題,比如一般用于狀態(tài)控制的cookie,常用于存儲登錄的信息,如果不禁止跨域訪問,那么別的網(wǎng)站只需要一段腳本就可以獲取你的cookie,從而冒充你的身份去登錄網(wǎng)站,造成非常嚴(yán)重的安全問題。因此,瀏覽器均推行同源策略,各種WEB服務(wù)器也默認(rèn)禁止跨域訪問,要想網(wǎng)站允許跨域訪問,還需要進(jìn)行相關(guān)的設(shè)置。
打開IIS,找到并點擊“HTTP響應(yīng)標(biāo)頭”,如圖1所示,在右側(cè)可就以看到“添加”,然后添加如下標(biāo)頭即可:
Access-Control-Allow-Origin:*
A c c e s s-C o n t r o l-A l l o w-M e t h o d s GET,POST,PUT,DELETE,OPTI ONS
Access-Control-Allow-Headers:Content-Type,api_key, Authorization
或者直接在Web.config配置文件中寫入程序,如圖2所示。
其 中,Access-Control-Allow-Origin表示請求來源,“*”表示不限定即允許任何域名訪問;Access-Control-Allow-Methods表示請求方法;Access-Control-Allow-Headers表示請求消息頭。
首先在配置文件httpd.conf中找到下面這行,并把#注釋符去掉,以開啟Apache頭信息自定義模塊。
#LoadModule headers_module modules/mod_headers.so
然后修改站點的配置文件:
AllowOverride None
Require all granted
H e a d e r s e t Access-Control-Allow-Origin *
圖2 配置內(nèi)容
圖3 配置內(nèi)容
Header set Access-Control-Allow-Origin *行末的“*”表示允許所有的域名訪問,當(dāng)然這是很危險的,較為安全的配置,應(yīng)該是直接指定具體的域名。如果直接指定具體的域名,那么就要用Header add而不是Header set,否則只有最后一行的配置生效:
o r y"/home/wwwroot/php.qhdedu.net"> AllowOverride None Require all granted H e a d e r a d d Access-Control-Allow-Origin "poms.qhdedu.net" H e a d e r a d d Access-Control-Allow-Origin "wg.qhdedu.net" 設(shè)置后需要重啟Apache生效。 Nginx通過配置Access-Control-Allow-Origin來解決跨域問題,但此參數(shù)只允許配置單個域名“add_header Access-Control-Allow-Origin www.qhdedu.com” 或“add_header Access-Control-Allow-Origin *”允許全部域名,如需允許多域名跨域訪問時可用map,配置如圖3所示。3.Nginx的設(shè)置