大家好，我是自學前端菜鳥
有些網頁的技術用語還不是那麼熟悉，如果有表達不清楚的地方請前輩多多包涵
問題：
想要使用spoonacular的ＡＰＩ做一個菜單，
我用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的話可以處理這個跨域問題嗎？
如果更改了變成可以跨域共享的話，那我的網頁會變得不安全嗎？
謝謝
已邀請的邦友 {{ invite_list.length }}/5
因為你從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
由你自己的網站自己寫，接受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);
}
了解，謝謝你的解答
我是用Js寫的，也不會後端
不過長知識了，原來還可以這樣！
我有個業餘作品就是個音樂播放網站，曲目來源是KKBOX，音樂源是YOUTUBE，KKBOX的API就有CORB的問題，我就用這個方法繞過瀏覽器的限制
iThome鐵人賽
看影片追技術