本文介紹DataV-Board數據看板分享鏈接的域名,從datav.aliyuncs.com變更為b.datav.run后無法正常運行的解決方案。
背景信息
為更好地支持數據看板分享功能,DataV-Board計劃于2024年11月20日起將發布分享頁的域名由datav.aliyuncs.com變更為b.datav.run。詳情請參見分享頁域名變更公告。
域名變更后,如下場景可能會因存在跨域訪問限制,導致新域名無法正常訪問,您可參考本文按需進行排查處理:
組件使用API作為數據源
組件使用API作為數據源,可能會因域名變更導致跨域請求被攔截。您可根據組件配置數據源時是否勾選需要cookie進行排查處理:
需要cookie,表示調用API時不選擇代理且需要獲取cookie信息進行身份驗證或保存狀態。
本文以折線圖示例數據源配置,其他組件配置類似。
未勾選需要cookie:請確保請求響應頭
response headers
中包含Access-Control-Allow-Origin: *
,即瀏覽器允許來自任何源(網站)的請求訪問該資源,用于實現跨源資源共享(CORS)。勾選需要cookie:需根據請求字段
request.headers.referer
動態返回可被跨域請求的響應頭response headers
,示例如下。當前頁面地址
請求字段request.headers.referer
滿足要求的響應頭response headers
編輯頁:
https://datav.aliyun.com/v/editor/216787
https://datav.aliyun.com/admin/screen/216787
Access-Control-Allow-Origin: https://datav.aliyun.com
發布分享頁(域名變更前):
https://datav.aliyuncs.com/share/xxx
https://datav.aliyuncs.com/share/xxx
Access-Control-Allow-Origin: https://datav.aliyuncs.com
發布分享頁(域名變更后):
https://b.datav.run/share/xxx
https://b.datav.run/share/xxx
Access-Control-Allow-Origin: https://b.datav.run
組件使用DataV 數據代理服務作為數據源
組件使用DataV 數據代理服務作為數據源,可能會因域名變更導致跨域請求被攔截。您可按照如下步驟排查處理:
若DataV數據代理服務中未配置跨域Origins(即該配置為空),則無需更改。
說明跨域Origin是指在不同域名、協議或端口之間進行網絡請求,實現資源共享。
若DataV數據代理服務中配置了跨域Origins,請將以下兩個地址添加至相應配置中。
http://b.datav.run
https://b.datav.run
DataV數據代理服務
舊跨域Origins配置
新跨域Origins配置
未配置跨域Origins
不涉及
不涉及
已配置跨域Origins
https://datav.aliyuncs.com http://datav.aliyuncs.com https://datav.aliyun.com http://datav.aliyun.com
https://datav.aliyuncs.com http://datav.aliyuncs.com https://datav.aliyun.com http://datav.aliyun.com https://b.datav.run http://b.datav.run
使用輪播頁面或iframe組件
使用輪播頁面或iframe組件,可能會因為跨域限制,導致頁面無法在新域名b.datav.run下被訪問,內面內容無法正常加載。
本文以iframe組件示例相關排查處理操作,輪播頁面操作類似。
訪問新版分享鏈接,若iframe頁面內容無法正常加載,表示該頁面在響應頭里添加了X-Frame-Options限制,您輸入的iframe頁面地址不支持在b.datav.run下被訪問。
請刪除響應頭中的X-Frame-Options字段,或修改X-Frame-Options字段的內容,增加跨域支持。示例如下。
X-Frame-Options字段用于保護網頁免受某些類型的網絡攻擊,提高網頁的安全性。X-Frame-Options可設置為如下值:
X-Frame-Options:DENY,表示不允許任何網站在iframe中嵌入該頁面。
X-Frame-Options:SAMEORIGIN,表示僅允許同源網站在iframe中嵌入該頁面。
X-Frame-Options:ALLOW-FROM URL,表示允許指定的源(URI)在iframe中嵌入該頁面。
當前頁面地址 | request.headers.referer | 滿足要求的響應頭 response headers |
編輯頁:
|
|
|
發布分享頁(域名變更前):
|
|
|
發布分享頁(域名變更后):
|
|
|