用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進行呼叫:
然後在我的微信訊息伺服器上發起如下的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上:
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跨域訪問的問題,大家有興趣可以瞭解一下:
更多閱讀
要獲取更多Jerry的原創技術文章,請關注公眾號"汪子熙"或者掃描下面二維碼:
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/24475491/viewspace-2155181/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 當SAP雲平臺account的service Marke place裡找不到Machine Learning服務該怎麼辦Mac
- SAP雲平臺上部署應用時遇到disk quota不夠的問題
- Angular應用解決跨域訪問的問題Angular跨域
- JavaScript 中遇到的錯誤問題,該怎麼處理?JavaScript
- 開發過程中遇到問題該怎麼辦?
- 應用跨平臺問題?
- 跨域訪問是什麼!怎麼解決?跨域
- js資源跨域訪問的問題JS跨域
- 解決JS跨域訪問的問題JS跨域
- 使用代理伺服器解決 SAP UI5 應用訪問遠端 OData 服務的跨域問題試讀版伺服器UI跨域
- 如何處理使用 SAP UI5 消費真實的 OData 服務時遇到的跨域問題UI跨域
- 如何在SAP雲平臺上使用MongoDB服務MongoDB
- 使用SAP雲平臺 + JNDI訪問Internet Service
- 讓SAP雲平臺上的Web應用使用destination服務Web
- 申請SSL證書遇到這些問題該怎麼辦
- 前端怎麼解決跨域問題前端跨域
- OpenLayer4跨域訪問GeoServer釋出的TMS服務跨域Server
- JavaScript跨域問題總結JavaScript跨域
- NodeJS+Express遇到的跨域問題NodeJSExpress跨域
- 使用免費開源軟體時遇到問題該怎麼辦?
- localStorage 跨域訪問跨域
- 該怎麼解決運維定位服務故障問題?運維
- 防止跨域問題無法訪問網址跨域
- 跨域問題解決辦法跨域
- 解決Django本地介面不能跨域訪問的問題Django跨域
- Nginx解決前端訪問資源跨域問題Nginx前端跨域
- iframe 元素跨域訪問跨域
- 跨源通訊、跨域訪問跨域
- JavaScript 跨域訪問(API介面)實現原理分析JavaScript跨域API
- 如何在 SAP BTP 平臺上啟用 HANA Cloud 服務Cloud
- 跨域問題跨域
- 阿里雲圖片跨域訪問設定阿里跨域
- 阿里雲服務商告訴您產品出現問題怎麼辦,怎麼提交工單阿里
- 訪問 SAP 電商雲 Storefront 時遇到的 HTTP 403 錯誤HTTP
- 搞懂:前端跨域問題JS解決跨域問題VUE代理解決跨域問題原理前端跨域JSVue
- 跨域CORS圖片上傳問題跨域CORS
- 寶塔 ftp訪問不了的問題 filezilla訪問不了Purefpt服務FTP
- 一臺主機,兩個WEB應用服務之間的連結訪問的問題Web