iT邦幫忙

0

能夠使用 Async處理Cross-Origin Read Blocking (CORB) 嗎?

大家好,我是自學前端菜鳥
有些網頁的技術用語還不是那麼熟悉,如果有表達不清楚的地方請前輩多多包涵

問題:
想要使用spoonacular的API做一個菜單,
我用Async/await方式取得了每道菜的title
但是url的部分就一直出現以下訊息

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://joanne-eatswellwithothers.com/2020/06/raspberry-star-anise-crumble-muffins.html with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

我爬文看一些處理相關問題的例子都是使用Ajax
使用Async方式呼叫API的話可以處理這個跨域問題嗎?
如果更改了變成可以跨域共享的話,那我的網頁會變得不安全嗎?

謝謝

看更多先前的討論...收起先前的討論...
dragonH iT邦超人 5 級 ‧ 2020-10-14 11:50:49 檢舉
Async/await 跟 cors 一點關係也沒有
這需要後端設定喔。要不然就得改成其它方式請求了。
froce iT邦大師 1 級 ‧ 2020-10-15 11:37:45 檢舉
跨域要後端幫你設定,跟async無關。
然後你如果沒辦法讓後端幫你,你可以寫爬蟲抓下來再自己設定。
iku124 iT邦新手 5 級 ‧ 2020-10-15 15:14:30 檢舉
非常感謝大家的回覆
受益良多,自己撞牆了好久
謝謝:)
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

2 個回答

1
通靈亡
iT邦高手 1 級 ‧ 2020-10-14 12:08:00

因為你從A網域的網站呼叫B網域的API
B網域的API不允許跨域存取資料,瀏覽器遵守同源政策把回應擋下來 (CORS)
以及呼叫API的請求檔頭MIME 與回應檔頭的Content-type不同 (CORB)

這個問題跟Async/Await沒什麼關係
Async/Await 是用來處理非同步的需求,不是用來呼叫API

看一下這兩篇連結,了解CORS和CORB

1.[教學] CORS 是什麼? 如何設定 CORS?
https://shubo.io/what-is-cors/

2.Cross-Origin Read Blocking (CORB)
https://juejin.im/post/6844903831373889550

iku124 iT邦新手 5 級 ‧ 2020-10-15 15:15:32 檢舉

了解!
非常謝謝你的解答和文章分享

0
japhenchen
iT邦超人 1 級 ‧ 2020-10-14 15:16:32

由你自己的網站自己寫,接受ajax API偽請求,網站後端(假設你用PHP)做CURL向B網站做真實API請求,把B網站的回應,送回到你的客戶端,這就沒有CORS的問題了,如果遇上比較機車的B網站會做header agent檢測,那就偽造agent吧

function getPageHTML($url)
{
    $agent = 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.0.3705; .NET CLR 1.1.4322)';
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_VERBOSE, true);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_USERAGENT, $agent);
    curl_setopt($ch, CURLOPT_URL, $url);
    return curl_exec($ch);
}
看更多先前的回應...收起先前的回應...

curl 的 post

function getPageHTML($url)
{
    $agent = 'Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET CLR 1.0.3705; .NET CLR 1.1.4322)';
    $ch = curl_init();
    curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
    curl_setopt($ch, CURLOPT_VERBOSE, true);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
    curl_setopt($ch, CURLOPT_USERAGENT, $agent);
    curl_setopt($ch, CURLOPT_URL, $url);
    curl_setopt($ch, CURLOPT_POST, true);
    curl_setopt($ch, CURLOPT_POSTFIELDS,http_build_query(array("abc"=>"123", "def"=>"456"))); 
    return curl_exec($ch);
}

iku124 iT邦新手 5 級 ‧ 2020-10-15 15:17:15 檢舉

了解,謝謝你的解答
我是用Js寫的,也不會後端
不過長知識了,原來還可以這樣!

我有個業餘作品就是個音樂播放網站,曲目來源是KKBOX,音樂源是YOUTUBE,KKBOX的API就有CORB的問題,我就用這個方法繞過瀏覽器的限制

iku124 iT邦新手 5 級 ‧ 2020-10-15 21:33:02 檢舉

請問這樣會有安全上的問題嗎?

沒有用到eval 這類的東西,也跟資料庫無關,純綷是on fly,所以我沒安全上的擔憂

iku124 iT邦新手 5 級 ‧ 2020-10-17 09:43:52 檢舉

了解~謝謝:)

我要發表回答

立即登入回答