如何配置跨域資料 - DataV

當您在DataV中使用API資料來源時，可能會遇到跨域的問題。本文為您介紹跨域問題的產生背景，並提供幾種常見的解決跨域問題的方法。

背景資訊

使用者A想建立一個可視化應用，用於向客戶展示資料。當資料來源類型選擇API時，可能出現以下兩種情況。

若為遠程伺服器上的API，則可以勾選伺服器代理請求（因跨域無法訪問時可勾選）。勾選伺服器代理請求（因跨域無法訪問時可勾選）時，由DataV背景伺服器對API發起請求，逾時時間為10秒，無法修改。
若為本地API，則不勾選伺服器代理請求（因跨域無法訪問時可勾選），且介面需要進行跨域資料配置。不勾選伺服器代理請求（因跨域無法訪問時可勾選）時，是由本地瀏覽器對該API進行訪問，逾時時間由瀏覽器來決定。

什麼是跨域資料配置

使用者A所包含的資料來自其自己的網站以及使用者B的網站。自己網站上的資料可以通過類似http://userA.com/page1這樣的介面進行訪問。使用者B提供http://userB.com/page2資料介面，但是當使用者A發送一個Javascript ajax請求到使用者B的網站上時，將無法獲得來自userB.com的資料。

開啟瀏覽器，您可以看到如下標記為紅色的文字（Chrome）。這意味著我們遇到了跨域問題。

XMLHttpRequest 無法載入 http://userB.com/page2。所請求的資源不帶有“Access-Control-Allow-Origin”前序。因此不允許來源站點點“http://userA.com/page1/”進行訪問。

跨域問題形成的原因

由於每個網站都包含各種使用者介面、訂單介面和文章介面，這意味著每個人都可以將這些介面返回的資料放入自己的網站，甚至是即時放入。因此瀏覽器採用同源策略，用於限制一個來源站點點的指令碼擷取其他來源站點點的資源。

說明

同源：如果兩個頁面的協議（HTTP）、連接埠（80）和主機（userA.com）相同，那麼這兩個頁面被認為是來自同一個源。

解決方案

A.x.com和B.x.com跨域
如果兩個網站的子域不同，會存在跨域問題。例如http://56.alibaba.com/和http://trade.alibaba.com/。
在頁面中加入如下代碼，將該頁面聲明為更進階別的域。
```
<script>
  document.domain = "x.com";
</script>
```
JSONP
雖然JSONP是最經典、高效、瀏覽器安全色最好的解決方案，但由於它有非常高的跨站指令碼攻擊風險，所以DataV不支援這種方式。您可查閱相關資料瞭解具體資訊。
跨域資源共用
說明
跨域資源共用：Cross Origin Resource Sharing，簡稱為CORS。已經與大多數較新的瀏覽器安全色。
- 基本原理：在來源站點點B（本地API）中加入自訂的HTTP頭部，使其他網站可以訪問其資源。
- 配置方法：
  - 若來源站點點B的介面資料需要被某一個網站使用，在資料服務器返回的前序資訊中加入以下內容。
```
Access-Control-Allow-Origin: http://userA.com
```
  - 若來源站點點B的介面資料需要被多個網站使用，必須使用一個程式來動態產生前序資訊。以PHP代碼為例。
```
<?php 
if (is_my_code($_SERVER['HTTP_ORIGIN'])) {
header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
}
?>
```
  - 若來源站點點B的介面資料需要被所用的網站使用，可以使用“*”。
```
Access-Control-Allow-Origin: *
```
- 添加Cookie操作：預設情況下CORS中不包含Cookie資訊。如果您想添加Cookie，可執行以下步驟。
  1. 添加withCredentials參數，以jQuery為例。
```
$.ajax({
 url: "http://userB.com/page2",
 xhrFields: {
   withCredentials: true
 }
});
```
  2. 將伺服器設定為允許使用前序憑證，但不允許使用萬用字元“*”，以PHP為例。
```
<?php 
if (is_my_code($_SERVER['HTTP_ORIGIN'])) {
header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}"); // Disallow “*”
header("Access-Control-Allow-Credentials:true");
}
?>
```
    更多詳細資料請參見HTTP存取控制（CORS）。