關于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.hanatrial.ondemand.com/connectivity/api?userinput=

然后在我的微信消息服務器上發起如下的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/06/cross-domain-request-in-abap-and-java-with-two-workaround/

解法2：JSONP

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

Play around with JSONP in nodeJS server and ABAP server

https://blogs.sap.com/2017/06/04/play-around-with-jsonp-in-nodejs-server-and-abap-server/

而我使用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/04/explore-the-comsapui5resourceresourceservlet/

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

https://github.com/i042416/SCPCrossDomainSolution

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-connectivityproxy

更多閱讀

• 使用Java + SAP云平臺 + SAP Cloud Connector調用ABAP On-Premise系統里的函數

• 使用JDBC操作SAP云平臺上的HANA數據庫

• 使用Java程序消費SAP Leonardo的機器學習API

• C4C和微信集成系列教程

要獲取更多Jerry的原創技術文章，請關注公眾號”汪子熙”或者掃描下面二維碼:

總結

以上是生活随笔為你收集整理的用JavaScript访问SAP云平台上的服务遇到跨域问题该怎么办的全部內容，希望文章能夠幫你解決所遇到的問題。

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