快捷導(dǎo)航

Apache中配置支持CORS（跨域資源共享）實例

更新時間：2015年01月20日 09:46:42 投稿：junjie

這篇文章主要介紹了Apache中配置支持CORS（跨域資源共享）實例,本文給出了一個完整的apache、PHP、JavaScript結(jié)合實現(xiàn)的跨域資源共享實例,需要的朋友可以參考下

當(dāng)使用ajax跨域請求時，瀏覽器報錯：XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin.肯定是跨域的問題，如果用jsonp或者proxy的方式進行修改的話未免需要太大的工程量，所以采用CORS這種比較簡單高效的技術(shù)。相比JOSP的方式，CORS更為高效。JSONP由于它的原理只能實現(xiàn)GET請求，而CORS支持所有類型的HTTP請求。使用CORS,可以使用普通的ajax實現(xiàn)跨域，這對于前端來說是極大的福音了,這個技術(shù)被現(xiàn)在大多數(shù)瀏覽器所普遍支持，因為跨域已經(jīng)是普遍的要求，瀏覽器肯定會逐漸流出適當(dāng)?shù)摹箝T'出來專門用以跨域。

瀏覽器支持情況

經(jīng)本人測試IE瀏覽器中IE10及以上才可正常發(fā)送請求

1.服務(wù)器端對于CORS的支持，是通過設(shè)置Access-Control-Allow-Origin來進行的。如果瀏覽器檢測到相應(yīng)的設(shè)置，就可以允許Ajax進行跨域的訪問，也就是相應(yīng)的‘后門'。

設(shè)置Apache：Apache需要使用mod_headers模塊來激活HTTP頭的設(shè)置，它默認(rèn)是激活的。你只需要修改Apache配置文件中的httpd.conf文件：

原始代碼

復(fù)制代碼代碼如下:

<Directory />

AllowOverride none

Require all denied

</Directory>

改為下面代碼

復(fù)制代碼代碼如下:

<Directory />

Require all denied

Header set Access-Control-Allow-Origin *

</Directory>

在處理請求的PHP文件中設(shè)置：

復(fù)制代碼代碼如下:

<?php
header("Access-Control-Allow-Origin:*");
//處理請求輸出數(shù)據(jù)

?>

配置的含義是允許任何域發(fā)起的請求都可以獲取當(dāng)前服務(wù)器的數(shù)據(jù)。當(dāng)然，這樣有很大的危險性，惡意站點可能通過XSS攻擊我們的服務(wù)器。所以我們應(yīng)該盡量有針對性的對限制安全的來源，例如下面的設(shè)置使得只有http://jb51.net/這個域才能跨域訪問服務(wù)器的API。

httpd.conf中：

復(fù)制代碼代碼如下:

Header set Access-Control-Allow-Origin http://m.fzitv.net

php文件中：

復(fù)制代碼代碼如下:

<?php

header("Access-Control-Allow-Origin:http://m.fzitv.net");

前臺代碼：

復(fù)制代碼代碼如下:

<script type="text/javascript">

function createCORSRequest(method, url) { 

var xhr = new XMLHttpRequest(); 

if ("withCredentials" in xhr) { 

// 此時即支持CORS的情況 

// 檢查XMLHttpRequest對象是否有“withCredentials”屬性 

// “withCredentials”僅存在于XMLHTTPRequest level 2對象里 

} else { 

// 否則檢查是否支持XDomainRequest 

// XDomainRequest僅存在于IE中，是IE用于支持CORS請求的方式 

xhr = new XDomainRequest(); 

}

xhr.open(method, url, true); 

xhr.send(); 

xhr.onload = function(){

alert(xhr.responseText);

}

}

createCORSRequest('GET', "http://192.168.1.58/t.php"); 

</script>