ARTICLE AD BOX
i am using this api(&hardcoded too), its opening perfectly in my browser but not working in my code.
Why does the Swiggy menu API:
work perfectly when opened directly in the browser
but fails when called using fetch() in React through a CORS proxy?
Why does one Swiggy endpoint (list/v5)https://www.swiggy.com/dapi/restaurants/list/v5?lat=28.6542&lng=77.2373 work but the menu/pl https://www.swiggy.com/dapi/menu/pl?page-type=REGULAR_MENU&complete-menu=true&lat=28.6542&lng=77.2373&restaurantId=397778&catalog_qa=undefined&submitAction=ENTERendpoint fails?
import { useParams } from "react-router"; import { useState,useEffect } from "react"; export default function RestaurantMenu() { let {id} = useParams(); console.log(id); const [RestaurantMenuData, setRestaurantMenuData] = useState(null); useEffect(()=> { async function fetchData() { const proxyServer = "https://cors-anywhere.herokuapp.com/" const SwiggyApi = `https://www.swiggy.com/dapi/menu/pl?page-type=REGULAR_MENU&complete-menu=true&lat=28.6542&lng=77.2373&restaurantId=${id}&catalog_qa=undefined&submitAction=ENTER` const response = await fetch(proxyServer+SwiggyApi) const data = await response.json(); const tempData= data?.data?.cards[5]?.groupedCard?.cardGroupMap?.REGULAR?.cards; const filterData = tempData.filter((items)=> 'title' in items?.card?.card) setRestaurantMenuData(filterData); } fetchData(); },[]) console.log(RestaurantMenuData); return( <div className="w-[80%] flex flex-wrap mt-20 mx-auto gap-5"> <div>{id}</div> </div> ) }