用JavaScript訪問SAP雲平臺上的服務遇到跨域問題該怎麼辦

關於JavaScript的跨域問題(Cross Domain)的討論, 網上有太多的資源了。國內的程序猿寫了很是多的優秀文章，Jerry這裏就再也不重複了。

直入主題，最近我正在作一個原型開發：經過SAP雲平臺和SAP Cloud Connector把On-Premise系統上的ABAP function module STFC_CONNECTION 暴露出來，給微信消費。

這個function module的邏輯很簡單，直接把輸入參數REQUTEXT的內容不加任何處理，拷貝到輸出參數ECHOTEXT。

具體操做步驟參考個人公衆號文章：使用Java+SAP雲平臺+SAP Cloud Connector調用ABAP On-Premise系統裏的函數

部署到SAP雲平臺後，經過以下的API endpoint進行調用：

https://demoi042416trial.hana...

而後在個人微信消息服務器上發起以下的AJAX調用去消費（由於是POC，因此把API endpoint硬編碼在第3行）：

遇到了意料之中的跨域錯誤: No 'Access-Control-Allow-Origin' header is present on the requested resource.

如何解決?

解法1：Cross-Origin Resource Sharing

若是服務器端的響應可以經過編程或配置去影響，那麼能夠藉助Cross-Origin Resource Sharing，在HTTP響應結構中添加字段Access-Control-Allow-Origin，其內容根據實際業務賦以須要的origin字段便可。這裏的origin在Jerry看來就是一個白名單。

解決方案參考個人博客：

Cross domain request in ABAP and Java

https://blogs.sap.com/2017/05...

解法2：JSONP

用JSONP也能解決跨域問題，但這個方法一樣須要在服務器端經過編程方式作一些處理。具體使用方式參考個人博客：

Play around with JSONP in nodeJS server and ABAP server

https://blogs.sap.com/2017/06...

而我使用SAP雲平臺加上Cloud Connector將On Premise上的function module暴露到公網，這種方式開發人員沒法對HTTP的響應頭進行編程或配置。所以JSONP對於我原型開發解決跨域問題也沒有幫助。

在SAP雲平臺的Mobile Service for Development and Operations cockpit裏有對應的Cross Domain Access參數配置。不過個人原型開發沒有用到SAP雲平臺Mobile Service這套架構，所以也不適用。

解法3：自開發ProxyServlet

接下來咋辦？Jerry之前作CRM Fiori開發時，用的是Eclipse IDE，在本地起一個Tomcat，上面跑的Fiori應用也能經過localhost這個域訪問到On-Premise系統域上的OData服務。當時咋不會遇到跨域問題呢？仔細回憶了一下，當時咱們的Tomcat服務器上還部署了一個Proxy Servlet。Index.html發送的AJAX請求被ProxyServlet攔截，由ProxyServlet經過Java代碼向On-Premise系統發起請求。請求獲得響應以後，ProxyServlet再將其發送給Index.html。

這種類型的Servlet其原理在個人這篇博客裏有詳細介紹：

Explore the com.sap.ui5.resource.ResourceServlet

https://blogs.sap.com/2014/12...

思路清楚後，寫代碼實現就很容易了。上圖對應的Java Web項目的源代碼在個人github上：

https://github.com/i042416/SC...

1. index.html裏發送的AJAX請求實際指向的處理者是ProxyServlet：注意下圖第三行的請求url路徑中的proxy。

2. 開發一個ProxyServlet，攔截url路徑裏包含proxy的那些請求。回到個人原型開發需求，SAP雲平臺上的API消費現在經過ProxyServlet來實現，爲簡單起見，我將API endpoint硬編碼在ProxyServlet裏。

通過測試，能按照指望的方式工做：域localhost的AJAX請求可以成功訪問SAP雲平臺上的API：

寫完以後我在Google上搜了一下，發現SAP已經在github上發佈了一個標準的Proxy project，用於處理這種JavaScript跨域訪問的問題，你們有興趣能夠了解一下：

https://github.com/SAP/cloud-...

更多閱讀

• 使用Java + SAP雲平臺 + SAP Cloud Connector調用ABAP On-Premise系統裏的函數
• 使用JDBC操做SAP雲平臺上的HANA數據庫
• 使用Java程序消費SAP Leonardo的機器學習API
• C4C和微信集成系列教程

要獲取更多Jerry的原創技術文章，請關注公衆號"汪子熙".