[Day 23] - React 取得永丰汇率api的json资料(1)

学会游泳会好的方法就是掉进水里

今天就直接来用react 取api
我直接参考React官网的教学:https://zh-hant.reactjs.org/docs/faq-ajax.html
来连到永丰的api:https://mma.sinopac.com/ws/share/rate/ws_exchange.ashx

原本我想直接用内建的fetch，不过找资料时看到有另一个选项：axios
网路上有很多fetch跟axios比较的文章
看起来是比fetch更优的选择，所以改用axios
npm install axios

因为要抓永丰的api会遇到我在[Day 11] - 准备串接永丰汇率API!
提到的CORS问题，由於是不同网域、不同埠号，违反CORS规则而被浏览器禁止了接收资料。

所以我打算使用jsonp作法来绕过去
npm install axios-jsonp

先测试一下

    axios({
      url: 'https://mma.sinopac.com/ws/share/rate/ws_exchange.ashx',
      method: 'get',
      adapter: jsonpAdapter,
      
      }).then((res) => {
        console.log(res.data)
      }).catch((error) => { console.error(error) });

打开浏览器看看结果

晕倒 原来过了CROS後还有CROB要解决

为了抄近路有时候反而绕了远路

CORB (Cross-Origin Read Blocking)跟CORS类似，都是浏览器用来保护用户的安全机制，
只要浏览器发现，要载入的内容的content type(例如:application/json)跟它被放置的标签不一致(如<script>是用来放javascript的标签，如果<script>内要被载入的资源的content type是json就会被阻挡)

查了很久都没找到解决办法...

但是永丰自己是怎麽做到的呢?

看了一次永丰网银用来取得汇率的js方法，也没看出什麽端倪

...

就在我快要放弃时，发现了藏在细节里的魔鬼
重新看永丰的网银取汇率时，会在api网址後加一些参数

看上图可以发现，永丰的汇率api在url带了一些参数後，content type就变成javascript了!
这不就是为了jsonp而生的设计吗
稍微试一下，就可以试出，那个关键的参数就是Cross=genREMITResult
只要带上这个参数，就能避过CROB了
马上试一下：

错误发生的原因是我们从API得来的内容:

genREMITResult([{"TitleInfo":"报价时间：2021-10-08 15:30:23本资讯仅供参考，实际成交汇率以本行牌告交易当下所议定的汇率为准(牌告更新自营业时间9:00至15:30止)。","QueryDate":"2021/10/09 18:22:49","HeadInfo":[{"HeadText":"币别","HeadAlign":"2","DataAlign":"1","MainShow":"Y","DetailShow":"N","FieldKey":"DataValue1","OrderIndex":"01","FieldWidth":"20"},{"HeadText":"银行买进Bank Buy","HeadAlign":"2","DataAlign":"2","MainShow":"Y","DetailShow":"N","FieldKey":"DataValue2","OrderIndex":"02","FieldWidth":"10"},{"HeadText":"银行卖出Bank Sell","HeadAlign":"2","DataAlign":"2","MainShow":"Y","DetailShow":"N","FieldKey":"DataValue3","OrderIndex":"03","FieldWidth":"10"},{"HeadText":"","HeadAlign":"2","DataAlign":"2","MainShow":"N","DetailShow":"N","FieldKey":"DataValue4","OrderIndex":"04","FieldWidth":"10"},{"HeadText":"","HeadAlign":"2","DataAlign":"2","MainShow":"N","DetailShow":"N","FieldKey":"DataValue1Img","OrderIndex":"05","FieldWidth":"10"}],"SubInfo":[{"DataValue1":"美元(USD)","DataValue1Img":"/mma8/mobile/images/Rate_Info/USD.png","DataValue2":"27.97800","DataValue3":"28.08200","DataValue4":"USD"},{"DataValue1":"日圆(JPY)","DataValue1Img":"/mma8/mobile/images/Rate_Info/JPY.png","DataValue2":"0.24860","DataValue3":"0.25200","DataValue4":"JPY"},{"DataValue1":"港币(HKD)","DataValue1Img":"/mma8/mobile/images/Rate_Info/HKD.png","DataValue2":"3.57510","DataValue3":"3.62560","DataValue4":"HKD"},{"DataValue1":"欧元(EUR)","DataValue1Img":"/mma8/mobile/images/Rate_Info/EUR.png","DataValue2":"32.19000","DataValue3":"32.53600","DataValue4":"EUR"},{"DataValue1":"英镑(GBP)","DataValue1Img":"/mma8/mobile/images/Rate_Info/GBP.png","DataValue2":"37.89700","DataValue3":"38.29300","DataValue4":"GBP"},{"DataValue1":"瑞士法郎(CHF)","DataValue1Img":"/mma8/mobile/images/Rate_Info/CHF.png","DataValue2":"30.02700","DataValue3":"30.23800","DataValue4":"CHF"},{"DataValue1":"澳币(AUD)","DataValue1Img":"/mma8/mobile/images/Rate_Info/AUD.png","DataValue2":"20.32800","DataValue3":"20.55200","DataValue4":"AUD"},{"DataValue1":"新加坡币(SGD)","DataValue1Img":"/mma8/mobile/images/Rate_Info/SGD.png","DataValue2":"20.52800","DataValue3":"20.72700","DataValue4":"SGD"},{"DataValue1":"瑞典币(SEK)","DataValue1Img":"/mma8/mobile/images/Rate_Info/SEK.png","DataValue2":"3.15530","DataValue3":"3.21830","DataValue4":"SEK"},{"DataValue1":"加拿大币(CAD)","DataValue1Img":"/mma8/mobile/images/Rate_Info/CAD.png","DataValue2":"22.22500","DataValue3":"22.43300","DataValue4":"CAD"},{"DataValue1":"泰铢(THB)","DataValue1Img":"/mma8/mobile/images/Rate_Info/THB.png","DataValue2":"0.81130","DataValue3":"0.84440","DataValue4":"THB"},{"DataValue1":"南非币(ZAR)","DataValue1Img":"/mma8/mobile/images/Rate_Info/ZAR.png","DataValue2":"1.82920","DataValue3":"1.91410","DataValue4":"ZAR"},{"DataValue1":"纽西兰币(NZD)","DataValue1Img":"/mma8/mobile/images/Rate_Info/NZD.png","DataValue2":"19.27800","DataValue3":"19.49200","DataValue4":"NZD"},{"DataValue1":"澳门币(MOP)","DataValue1Img":"/mma8/mobile/images/Rate_Info/MOP.png","DataValue2":"3.43410","DataValue3":"3.55860","DataValue4":"MOP"},{"DataValue1":"人民币(CNY)","DataValue1Img":"/mma8/mobile/images/Rate_Info/CNY.png","DataValue2":"4.31890","DataValue3":"4.37390","DataValue4":"CNY"},{"DataValue1":"离岸人民币(CNH)","DataValue1Img":"/mma8/mobile/images/Rate_Info/CNH.png","DataValue2":"4.31890","DataValue3":"4.37000","DataValue4":"CNH"}],"MemoUrl":null,"Header":"SUCCESS","Message":""}]);

被当作JS执行，因为永丰在JSON外还用了一个genREMITResult()方法包住
可是却没有定义这个方法的关系...
要怎麽解决，明天继续研究...

前端的水也是挺深的