iT邦幫忙

2021 iThome 鐵人賽

DAY 11
0
永豐金融APIs

30天全端挑戰!React+Spring Boot+Mongo DB 串接永豐API 打造金融網站系列 第 11

[Day 11] - 準備串接永豐匯率API!

到了第11天,終於回歸主題了,今天就來開始串接永豐的api吧!

本來是這麼想的,不過突然發現...
永豐提供給參賽者的api只有線上收款api,
https://ithelp.ithome.com.tw/upload/images/20210926/20128973uXxl7EjcJn.png

而且Sample Code只有c#跟php/images/emoticon/emoticon04.gif

沒關係,自己想辦法!

到永豐的網銀看匯率,按f12開啟開發者工具
https://ithelp.ithome.com.tw/upload/images/20210926/20128973SJlXupMxGT.png
找到匯率的api囉

就是這個啦

所幸,永豐的網銀是透過前端直接到api來取匯率的,
不然就要來開始準備爬蟲了

我規劃從spring boot先取得永豐api匯率的資料,存進mongo db,等到有人要看匯率的時候,
再將mongo db中的data傳給他

不過為什麼要這麼麻煩?

不如乾脆像永豐網銀的做法一樣,直接在前端fetch資料?

因為我們自己的網站domain肯定跟永豐不一樣,如果直接從前端fetch資料的話
我預計應該會遇到**CORS**的限制

也就是瀏覽器會檢查你當前所在的網站的domain
跟網站想要fetch的網站的domain是否一致,
不一致的話瀏覽器會幫你把這個request的response擋下來,
避免造成跨域攻擊之類的資安危害。

不過話說到這裡,我發現永豐網銀(https://bank.sinopac.com/)
跟匯率api的domain(https://mma.sinopac.com/)也不一樣耶!

難道是有加Access-Control-Allow-Origin的header嗎?

只要匯率api的server上有設定Access-Control-Allow-Origin這個response header,
並把網銀的domaon加入允許名單,
就能讓瀏覽器知道api server端是允許網銀這樣fetcch資料的,就不會阻擋了

馬上用開發者工具來看一下匯率api的response
https://ithelp.ithome.com.tw/upload/images/20210926/20128973asnoSmmB9B.png

顯然

https://ithelp.ithome.com.tw/upload/images/20210926/20128973nzFf82qHP2.png

那麼網銀是怎麼取得資料的呢?
繼續用瀏覽器的開發者工具查下去
https://ithelp.ithome.com.tw/upload/images/20210926/20128973XA0P0GoiH0.png

這邊可以看到更新匯率的按鈕呼叫了兩個方法
doREMIT();
doCASH();

我把頁面用另存新檔的方式下載下來,
會將這一頁的所有相關資源一起打包下載,比較好找

找到了,看這兩個方法都是以JQCommon_sendCrossAjax來取得資料
https://ithelp.ithome.com.tw/upload/images/20210926/20128973dhmBOQcmtt.png
https://ithelp.ithome.com.tw/upload/images/20210926/20128973WXQXs6xkEt.png

再找
https://ithelp.ithome.com.tw/upload/images/20210926/20128973iWYHVSlSBU.png
看起來沒什麼特別的,不過jsonp是什麼?

查了一下,原來ajax透過一種叫做jsonp(JSON with Padding)的方式
可以避免CROS的限制,又學到了一課...

原本我以為,要避免CROS只能透過
1.在資料提供方的Server加上Access-Control-Allow-Origin的設定(但顯然不可能叫永豐幫我加)
2.以proxy Server的方式取資料
就是前面講的 從我的後端取資料後再傳給前端

現在還有第三條路,就是用jsonp!
不過這在fetch、axios並沒有提供方法,如果要用的話不是自己手刻就是要引用jQuery...

今天先到這裡,想一下用哪個方式好


上一篇
[Day 10] - Spring Boot 實作登入驗證(四)(JWT登入驗證)
下一篇
[Day 12] - 初探永豐銀行線上收款API - 豐收款
系列文
30天全端挑戰!React+Spring Boot+Mongo DB 串接永豐API 打造金融網站30

1 則留言

0
rei1997
iT邦新手 5 級 ‧ 2021-09-26 03:57:39

剛剛發現,axios跟fetch其實還是有辦法可以用jsonp啦~只是要另外抓套件
像是https://www.npmjs.com/package/axios-jsonp
之類的

我要留言

立即登入留言