iT邦幫忙

1

【CORB】禁止跨域請求問題求解。

各位好:

小弟自己在練習前端開發,想利用https://tw.rter.info/howto_currencyapi.php 全球匯率API做個轉換幣值的小功能。
但是在過程中一直卡在
「jquery-dbg.js:9203 Cross-Origin Read Blocking (CORB) blocked cross-origin response https://tw.rter.info/capi.php?=1568944322585 with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.」這個錯誤訊息上。
查了一些資料,但是都沒有解決這個問題,
想請各位先進給予提點,謝謝。

https://ppt.cc/fhioQx
https://ppt.cc/ffqovx
https://ppt.cc/fvSYpx

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中
5
dragonH
iT邦超人 5 級 ‧ 2019-09-20 10:37:24
最佳解答

本來就不應該在前端去 call 跨域的 api

真要在前端 call

可以用 cors anywhere

codepen

看更多先前的回應...收起先前的回應...
taohighen iT邦新手 5 級 ‧ 2019-09-20 10:54:17 檢舉

我沒有搜到這個做法,搜到的做法都是要在伺服器端加上表頭(我不知道那個是甚麼意思),我有參考過https://www.twblogs.net/a/5c76138abd9eee31cea5021f
的作法,雖然是照本宣科的去嘗試,但是我也有稍微修改想要讓他能夠成功呼叫,可是都沒有成功。
謝謝您提供的作法,一貼成功,我會再進行修改和理解,謝謝您,如果有問題我會再上來發問。

小魚 iT邦大師 1 級 ‧ 2019-09-20 10:55:29 檢舉

通常那是測試用的,
如果是正式的應該還是要擋.

dragonH iT邦超人 5 級 ‧ 2019-09-20 10:58:02 檢舉

你看到的

加 header

用 jsonp

基本上都要該 server 有支援才可以

就像罕罕大 說的

你應該要從後端來 call api

taohighen iT邦新手 5 級 ‧ 2019-09-20 10:58:24 檢舉

另外想請教,為什麼跨源的API不應該在前端呼叫呢?
請您能夠提供關鍵字讓我搜尋學習即可,剛開始接觸前端,有買了幾本歐萊里的書來看,但是可能沒辦法像實務上如此貼近實際開發,希望前輩能夠給予一些指點,再次感謝。

taohighen iT邦新手 5 級 ‧ 2019-09-20 11:00:43 檢舉

感謝小魚前輩的提醒,我會注意這一點,另外我也會再去找找應該怎麼使用較為恰當。

淺水員 iT邦大師 6 級 ‧ 2019-09-20 11:10:39 檢舉

cors anywhere 也是透過後端伺服器去取資料
類似:
我們跟 cors anywhere 說 請給我 XXX 的資料
然候 cors anywhere 去跟 XXX 拿完資料後再跟我們說

由於 cors anywhere 的伺服器不是我們自己管理
所以不推薦在產品上使用
比較適合用在測試或是自己使用的小作品上面
(萬一 cors anywhere 掛掉不會有客戶打電話來抱怨的場合)

taohighen iT邦新手 5 級 ‧ 2019-09-20 11:16:58 檢舉

原來是這樣,感謝淺水員大,我能理解了。
所以除了用cors anywhere這個方式去取得這個api的資料外,
前端還有其他方式可以直接呼叫這個跨源api嗎?

dragonH iT邦超人 5 級 ‧ 2019-09-20 11:17:38 檢舉

另外想請教,為什麼跨源的API不應該在前端呼叫呢?

你去查為什麼 cors 會存在的原因就知道了

就像樓上所說

用 cors anywhere 是因為你想要在前端秀

而我假設你沒後端 server 才用的

正常是要透過自己的後端 server來 call 的

前端還有其他方式可以直接呼叫這個跨源api嗎?

這個理論上不算直接

他是透過別人的server來call api

如果對方 server 支援

jsonp 或者 cors header

那你就可以用這兩個方式 call

taohighen iT邦新手 5 級 ‧ 2019-09-20 11:28:42 檢舉

如果對方 server 支援

jsonp 或者 cors header

那你就可以用這兩個方式 call


好的,我明白了;
我目前沒有撰寫後端,只是想要透過這個api取得資料;
以上,感謝各位前輩悉心指導,我會再努力學習和消化的。
非常感謝。

1
Han
iT邦研究生 1 級 ‧ 2019-09-20 10:32:42
$.ajax({
        url: 'https://tw.rter.info/capi.php',
        type: 'GET',
        dataType: 'jsonp'
}).then(resp => {
    console.log(resp)
}) ;

基本上如此使用即可跨域存取!

不過伺服端也要有支援回傳callback function
剛剛試了一下此api並沒有支援傳入callback的功能

不過說到底這只是瀏覽器防止跨域存取,你使用php或python其他程式語言
直接用curl存取還是可以拿到資料

補充:在文件中沒提到任何callback參數的傳入,如果有支援jsonp文件中應該會提到傳入callback的key應該要為何

詳細說明可參考:Cross Domain Ajax 跨網域抓取資料(JSONP)

taohighen iT邦新手 5 級 ‧ 2019-09-20 10:48:23 檢舉

因為我是最近才開始接觸JS前端,curl的使用方式我會在嘗試去Google,找資源學習,謝謝您的回答。
的確沒有提到參數傳入,所以我有點不確定該怎麼做,下面一則dragonH大大的留言有提供作法,我嘗試了您的作法也是發生同樣的問題,但是dragonH大的是成功的。
但是謝謝您提供的文章,我查的時候好像漏看了這一篇,不知道為什麼一直找到英文的內容,我會好好閱讀後進行練習的,非常感謝。

0
阿瑜
iT邦研究生 4 級 ‧ 2019-09-20 13:41:28

可以使用heroku的 bypass

Bypass CORS

我要發表回答

立即登入回答