跨域及其設(shè)置方法

■ 河北科技師范學(xué)院 趙學(xué)作 秦皇島市睿訊網(wǎng)絡(luò)科技有限公司 趙少農(nóng)

編者按：瀏覽器從一個(gè)域名的網(wǎng)頁(yè)去請(qǐng)求另一個(gè)域名的資源時(shí)，域名、端口、協(xié)議任一不同，都被視為跨域訪問(wèn)，也就是瀏覽器對(duì)于javascript的同源策略的限制。所謂同源策略，即請(qǐng)求的url地址，必須與瀏覽器上的url地址處于同域上，也就是域名，端口，協(xié)議都必須相同。例如a.com下面的js不能調(diào)用b.com中的js、對(duì)象或數(shù)據(jù)。本文就跨域的設(shè)置作詳細(xì)介紹。

下面的幾種情況均屬于跨域訪問(wèn)。

域名不同：主域名不同: http://www.qhdedu.com/index.html訪問(wèn)http://www.qhdedu.net/1.js

子域名不同:http://www.qhdedu.com/index.html訪問(wèn)http://w3.qhdedu.com/1.js

域名和域名ip:http://www.qhdedu.com/index.html訪 問(wèn)http://106.75.53.220/1.js

端口不同：

http://www.qhdedu.com:8080/index.html訪問(wèn)http://www.qhdedu.com:8081/1.js

協(xié)議不同：

http://www.qhdedu.com:8080/index.html訪問(wèn)https://www.qhdedu.com:8080/1.js

圖1 IIS中HTTP響應(yīng)頭

允許跨域訪問(wèn)會(huì)帶來(lái)許多安全性的問(wèn)題，比如一般用于狀態(tài)控制的cookie，常用于存儲(chǔ)登錄的信息，如果不禁止跨域訪問(wèn)，那么別的網(wǎng)站只需要一段腳本就可以獲取你的cookie，從而冒充你的身份去登錄網(wǎng)站，造成非常嚴(yán)重的安全問(wèn)題。因此，瀏覽器均推行同源策略，各種WEB服務(wù)器也默認(rèn)禁止跨域訪問(wèn)，要想網(wǎng)站允許跨域訪問(wèn)，還需要進(jìn)行相關(guān)的設(shè)置。

跨域的設(shè)置

1.IIS的設(shè)置

打開IIS，找到并點(diǎn)擊“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表示請(qǐng)求來(lái)源，“*”表示不限定即允許任何域名訪問(wèn)；Access-Control-Allow-Methods表示請(qǐng)求方法；Access-Control-Allow-Headers表示請(qǐng)求消息頭。

2.Apache的設(shè)置

首先在配置文件httpd.conf中找到下面這行，并把#注釋符去掉，以開啟Apache頭信息自定義模塊。

#LoadModule headers_module modules/mod_headers.so

然后修改站點(diǎn)的配置文件：

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 *行末的“*”表示允許所有的域名訪問(wèn)，當(dāng)然這是很危險(xiǎn)的，較為安全的配置，應(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生效。

3.Nginx的設(shè)置

Nginx通過(guò)配置Access-Control-Allow-Origin來(lái)解決跨域問(wèn)題，但此參數(shù)只允許配置單個(gè)域名“add_header Access-Control-Allow-Origin www.qhdedu.com” 或“add_header Access-Control-Allow-Origin *”允許全部域名，如需允許多域名跨域訪問(wèn)時(shí)可用map，配置如圖3所示。