跨域請求數據

很多時候本地測試項使用線上的服務器的數據或者API，但是往往會提示不允許跨域訪問

參考如下：
http://www.yelanxiaoyu.com
http://enable-cors.org/server_apache.html

phonegap-本地開發如何取服務器數據，這一直是個很讓人困擾的問題。
特別是在做本地頁面調試和樣式修改的時候。
如何在本地瀏覽器里面獲取數據瀏覽app。
簡單的說就是在咱們的api文件里面聲明ccess-Control-Allow-Origin。
首先需要在服務器里面開啟

Apache：Apache需要使用mod_headers模塊來激活HTTP頭的設置，它默認是激活的。你只需要在Apache配置文件的, , 或的配置里加入以下內容即可：

Header set Access-Control-Allow-Origin *
那么不同的腳本有不同的寫法
PHP：只需要使用如下的代碼設置即可。

<?php header(“Access-Control-Allow-Origin:*”);

C#代碼

esponse.AppendHeader(“Access-Control-Allow-Origin”, “*”);

Python代碼

class CORSEnabledHandler(webapp.RequestHandler): def get(self): self.response.headers.add_header(“Access-Control-Allow-Origin”, “*”) self.response.headers[‘Content-Type’] = ‘text/csv’ self.response.out.write(self.dump_csv())

知識延伸

首先需要了解
CORS其實出現時間不短了，它在維基百科上的定義是：跨域資源共享（CORS ）是一種網絡瀏覽器的技術規范，它為Web服務器定義了一種方式，允許網頁從不同的域訪問其資源。而這種訪問是被同源策略所禁止的。CORS系統定義了一種瀏覽器和服務器交互的方式來確定是否允許跨域請求。 它是一個妥協，有更大的靈活性，但比起簡單地允許所有這些的要求來說更加安全。

詳細內容
要使用CORS，我們需要了解前端和服務器端的使用方法。
1、 前端
以前我們使用Ajax，代碼類似于如下的方式：

var xhr = new XMLHttpRequest(); xhr.open(“GET”, “/hfahe”, true); xhr.send();

這里的“/hfahe”是本域的相對路徑。
如果我們要使用CORS，相關Ajax代碼可能如下所示：

var xhr = new XMLHttpRequest(); xhr.open(“GET”, “http://blog.csdn.net/hfahe”, true); xhr.send();

請注意，代碼與之前的區別就在于相對路徑換成了其他域的絕對路徑，也就是你要跨域訪問的接口地址。
我們還必須提供瀏覽器回退功能檢測和支持，避免瀏覽器不支持的情況。

function createCORSRequest(method, url) {var xhr = new XMLHttpRequest();if (“withCredentials” in xhr) {// 此時即支持CORS的情況// 檢查XMLHttpRequest對象是否有“withCredentials”屬性// “withCredentials”僅存在于XMLHTTPRequest2對象里xhr.open(method, url, true);} else if (typeof != “undefined”) {// 否則檢查是否支持XDomainRequest，IE8和IE9支持// XDomainRequest僅存在于IE中，是IE用于支持CORS請求的方式xhr = new XDomainRequest();xhr.open(method, url);} else {// 否則，瀏覽器不支持CORSxhr = null;}return xhr; } var xhr = createCORSRequest(‘GET’, url); if (!xhr) {throw new Error(‘CORS not supported’); }

現在如果直接使用上面的腳本進行請求，會看到瀏覽器里控制臺的報錯如下：

錯誤顯示的很明顯，這是因為我們還未設置Access-Control-Allow-Origin頭。
2、 服務器
服務器端對于CORS的支持，主要就是通過設置Access-Control-Allow-Origin來進行的。如果瀏覽器檢測到相應的設置，就可以允許Ajax進行跨域的訪問。
HTTP 頭的設置方法有很多，http://enable-cors.org/這篇文章里對各種服務器和語言的設置都有詳細的介紹，下面我們主要介紹Apache和PHP里的設置方法。
Apache：Apache需要使用mod_headers模塊來激活HTTP頭的設置，它默認是激活的。你只需要在Apache配置文件的, , 或的配置里加入以下內容即可：

Header set Access-Control-Allow-Origin *
PHP：只需要使用如下的代碼設置即可。

<?php header(“Access-Control-Allow-Origin:*”);

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

Access-Control-Allow-Origin: http://blog.csdn.net

瀏覽器支持情況

上圖為各瀏覽器對于CORS的支持情況（綠色為支持，數據來源：http://caniuse.com/cors），看起來相當樂觀。主流瀏覽器都已基本提供對跨域資源共享的支持，所以，CORS才會在國外使用的如此普遍。
上文曾經提到，IE8和IE9在某種程度上可以通過XDomainRequest來提供同樣功能的支持。

總結

以上是生活随笔為你收集整理的跨域请求数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。