React 内部服务器错误：成功 api 调用时出现 URI 错误

Question

我是 React 新手，并且创建了一个 Remix React 应用程序，它调用 python 托管 api 后端来接收时间戳（目前）。

API 调用成功，并且与后端进行了完全通信，但问题是，一旦获取数据，它就会抛出“[vite]内部服务器错误：URI 错误”，我无法对此进行故障排除。

第 1 步 -> 转到 http://localhost:5173/dashboards/external/AAA

第 2 步 -> 显示仪表板.external.$iata.tsx，并对我的 python 后端进行 api 调用

第 3 步 -> HTML 已加载，但终端抛出“[vite] 内部服务器错误：URI 错误”

import { useParams } from "@remix-run/react";
import { json, LoaderFunction } from "@remix-run/node";
import { useLoaderData } from "@remix-run/react";
import styles from '~/styles/spinner.css';

export function links() {
  return [{ rel: "stylesheet", href: styles }];
}

type LoaderData = {
  apiData: any;
};

export const loader: LoaderFunction = async ({ request }) => {
  const url = new URL(request.url);
  const iata = encodeURIComponent(url.pathname.split('/').pop() || '');

  console.log(iata);

  const currentDate = new Date();
  const firstDayOfYear = new Date(currentDate.getFullYear(), 0, 1);
  const timezoneOffset = -currentDate.getTimezoneOffset();

  const headers = {
    "ITS-API-Key": process.env.API_KEY || "",
    "from": firstDayOfYear.toISOString(),
    "to": currentDate.toISOString(),
    "offset": timezoneOffset.toString()
  };

    let apiData = null;

    const response = await fetch("http://localhost:5000/init", {
        method: "GET",
        headers: headers
    });

    const responseData = await response.text();

    if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
    }

    apiData = JSON.parse(responseData);

  return json({ apiData});
};

function LoadingSpinner() {
    return (
      <div className="spinner">
        Loading...
      </div>
    );
  }

export default function ExternalDashboard() {
  const { iata } = useParams();
  const { apiData } = useLoaderData<LoaderData>();

  return (
    <div>
      <h1>External Dashboard</h1>
      <p>Current airport: {iata}</p>
    </div>
  );
}

我不明白为什么这个 URI 错误首先发生，它似乎是一个与 vite 相关的问题，错误堆栈也没有打印任何有用的东西。

Answer 1

您遇到的问题可能是由多种因素造成的，并且您看到的错误消息可能非常笼统，因此很难查明确切的问题。以下是一些步骤和建议，可帮助排除故障并解决您的问题：

• URL 编码：确保

  iata

  变量编码正确。尝试记录

  iata

  以确认其格式正确。

• 环境变量：确保正确设置

  process.env.API_KEY

  。 API 密钥丢失或不正确有时会导致意外问题。

• Vite and Fetch：检查

  fetch("http://localhost:5000/init")

  中的URL是否正确并且可以从您的前端访问。有时，Vite 可能会遇到某些 URL 格式或本地服务器问题。

• 错误处理：改进

  fetch

  调用中的错误处理，以捕获并记录有关潜在问题的更多详细信息。

这是改进错误处理的快速方法：

try {
  const response = await fetch("http://localhost:5000/init", {
    method: "GET",
    headers: headers
  });

  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }

  const responseData = await response.text();
  apiData = JSON.parse(responseData);

} catch (error) {
  console.error("Fetch error:", error);
  throw error;
}