title: *Finished* Instagram API works on local server but in deployed it's not working, returns a 404
body: <p><strong>I'm developing an application in React using TypeScript and VITE, my component that calls the API is this</strong></p>
  <pre><code>import axios from 'axios';
  import { useEffect, useState } from 'react';
  import { Swiper, SwiperProps, SwiperSlide } from 'swiper/react';
  import { A11y, Navigation, Pagination } from 'swiper';
  import 'swiper/css'
  import 'swiper/css/pagination'
  import 'swiper/css/scrollbar'
  
  interface IFeedItem {
    id: string;
    media_type: &quot;CAROUSEL_ALBUM&quot; | &quot;IMAGE&quot; | &quot;VIDEO&quot;;
    children: string;
    data: Array&lt;any&gt;;
    is_carousel_item: boolean;
    media_url: string;
    permalink: string;
  }
  export function Image() {
    const settings: SwiperProps = {
      spaceBetween: 1,
      slidesPerView: 1,
      pagination: {
        clickable: true
      },
      loop: true
  
    }
    const [feedList, setFeedList] = useState&lt;IFeedItem[]&gt;([]);
    const token = import.meta.env.VITE_INSTA_TOKEN;
    const fields = [&quot;media_url, media_type, permalink,children{media_type,media_url,thumbnail_url}&quot;]
    const url = `https://graph.instagram.com/me/media?access_token=${token}&amp;fields=${fields}`;
    async function getInstaFeed() {
      const { data } = await axios.get(url)
      setFeedList(data.data)
    }
    useEffect(() =&gt; {
      getInstaFeed();
    }, [])
    return (
      &lt;&gt;
        &lt;div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4 z-0 cursor-pointer h-auto w-auto transition-all object object-cover object-center'&gt;
          {feedList.map(item =&gt; (
            &lt;div key={item.id} &gt;
              {item.media_type === &quot;CAROUSEL_ALBUM&quot; &amp;&amp; (
                &lt;Swiper modules={[Navigation, Pagination, A11y]} {...settings} className=&quot;z-0&quot;&gt;
                  {item.children.data.map(child =&gt; (
                    &lt;SwiperSlide key={child.id} className=&quot;z-0&quot;&gt;
                      &lt;a href={item.permalink} target=&quot;_blanck&quot;&gt;
                        &lt;img src={child.media_url} alt=&quot;instagram&quot; /&gt;
                      &lt;/a&gt;
                    &lt;/SwiperSlide&gt;
                  ))}
                &lt;/Swiper&gt;
              )}
              {item.media_type === &quot;IMAGE&quot; &amp;&amp; (
                &lt;img className=&quot;&quot; key={item.id} src={item.media_url} /&gt;
              )}
              {item.media_type === &quot;VIDEO&quot; &amp;&amp; (
                &lt;video controls&gt;
                  &lt;source src={item.media_url} /&gt;
                &lt;/video&gt;
              )}
            &lt;/div&gt;
          ))}
        &lt;/div&gt;
      &lt;/&gt;
    )
  }
  </code></pre>
  <p>I'm using the Swiper library to make a carousel, because the instagram API returns information of type CAROUSEL_ALBUM, where there are children that contain the images, so to use it in an interesting way I did it like this.</p>
  <p><strong>When I run the server on my machine in localhost/portfolio everything is ok</strong>
  <a href="https://i.stack.imgur.com/HZcX7.jpg" rel="nofollow noreferrer">Image - working in localhost</a></p>
  <p><strong>But when I use VERCEL to access /portfolio I get a 404</strong>
  <a href="https://i.stack.imgur.com/k9ihE.png" rel="nofollow noreferrer">Image - not working in vercel</a></p>