跨域及其設置方法

■ 河北科技師范學院 趙學作 秦皇島市睿訊網絡科技有限公司 趙少農

編者按：瀏覽器從一個域名的網頁去請求另一個域名的資源時，域名、端口、協議任一不同，都被視為跨域訪問，也就是瀏覽器對于javascript的同源策略的限制。所謂同源策略，即請求的url地址，必須與瀏覽器上的url地址處于同域上，也就是域名，端口，協議都必須相同。例如a.com下面的js不能調用b.com中的js、對象或數據。本文就跨域的設置作詳細介紹。

下面的幾種情況均屬于跨域訪問。

域名不同：主域名不同: 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

協議不同：

http://www.qhdedu.com:8080/index.html訪問https://www.qhdedu.com:8080/1.js

圖1 IIS中HTTP響應頭

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

跨域的設置

1.IIS的設置

打開IIS，找到并點擊“HTTP響應標頭”，如圖1所示，在右側可就以看到“添加”，然后添加如下標頭即可：

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表示請求消息頭。

2.Apache的設置

首先在配置文件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 配置內容

圖3 配置內容

Header set Access-Control-Allow-Origin *行末的“*”表示允許所有的域名訪問，當然這是很危險的，較為安全的配置，應該是直接指定具體的域名。如果直接指定具體的域名，那么就要用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"

設置后需要重啟Apache生效。

3.Nginx的設置

Nginx通過配置Access-Control-Allow-Origin來解決跨域問題，但此參數只允許配置單個域名“add_header Access-Control-Allow-Origin www.qhdedu.com” 或“add_header Access-Control-Allow-Origin *”允許全部域名，如需允許多域名跨域訪問時可用map，配置如圖3所示。