*已完成* Instagram API 在本地服务器上工作，但在部署时它不起作用，返回 404答案

【问题标题】：*Finished* Instagram API works on local server but in deployed it's not working, returns a 404*已完成* Instagram API 在本地服务器上工作，但在部署时它不起作用，返回 404
【发布时间】：2022-06-10 18:19:32
【问题描述】：

我正在使用 TypeScript 和 VITE 在 React 中开发一个应用程序，我调用 API 的组件是这样的

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: "CAROUSEL_ALBUM" | "IMAGE" | "VIDEO";
  children: string;
  data: Array<any>;
  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<IFeedItem[]>([]);
  const token = import.meta.env.VITE_INSTA_TOKEN;
  const fields = ["media_url, media_type, permalink,children{media_type,media_url,thumbnail_url}"]
  const url = `https://graph.instagram.com/me/media?access_token=${token}&fields=${fields}`;
  async function getInstaFeed() {
    const { data } = await axios.get(url)
    setFeedList(data.data)
  }
  useEffect(() => {
    getInstaFeed();
  }, [])
  return (
    <>
      <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'>
        {feedList.map(item => (
          <div key={item.id} >
            {item.media_type === "CAROUSEL_ALBUM" && (
              <Swiper modules={[Navigation, Pagination, A11y]} {...settings} className="z-0">
                {item.children.data.map(child => (
                  <SwiperSlide key={child.id} className="z-0">
                    <a href={item.permalink} target="_blanck">
                      <img src={child.media_url} alt="instagram" />
                    </a>
                  </SwiperSlide>
                ))}
              </Swiper>
            )}
            {item.media_type === "IMAGE" && (
              <img className="" key={item.id} src={item.media_url} />
            )}
            {item.media_type === "VIDEO" && (
              <video controls>
                <source src={item.media_url} />
              </video>
            )}
          </div>
        ))}
      </div>
    </>
  )
}

我正在使用 Swiper 库制作轮播，因为 instagram API 返回类型为 CAROUSEL_ALBUM 的信息，其中有包含图像的子项，所以为了以一种有趣的方式使用它，我这样做了。

当我在 localhost/portfolio 的机器上运行服务器时，一切正常 Image - working in localhost

但是当我使用 VERCEL 访问 /portfolio 时，我得到了 404 Image - not working in vercel

【问题讨论】：

请澄清您的具体问题或提供更多详细信息以准确突出您的需求。正如目前所写的那样，很难准确地说出你在问什么。
你好，如果我不是很清楚很抱歉，实际上我一直在解决这个问题，我看了几个地方，我向大学生寻求帮助。最终这不是 API 错误，而是“查看”我的目录时出现的 VERCEL 错误。我必须在我的项目 'vercel.json' 的根目录中创建一个文件并将其放在这里： {"rewrites": [{"source": "/(.*)", "destination": "/"}] }

标签： reactjs api deployment instagram-api vercel