如果调用来自客户端组件，而不是来自服务器组件，则 NextJS 应用程序的 API 调用会抛出 403 错误

Question

就像标题所说，当我从客户端组件向外部 API 发出请求时，我得到一个 403，但如果我从服务器组件发出请求，它就可以正常工作。

我需要从客户端进行调用的原因是因为用户做出选择，并且发出的请求取决于选择，因此 useState() 用于管理选择。用户选择一个扇区，然后调用根据扇区id获取行业。

相关客户端组件代码：

const { data: session } = useSession();
  const [sector, setSector] = useState<Sector | null>(null);
  const [industries, setIndustries] = useState<Industry[]>([]);
  const [industry, setIndustry] = useState<Industry | null>(null);

  const handleSectorSelection = (event: React.ChangeEvent<{}>, value: Sector | null) => {
    setSector(value);
  };
  const handleIndustrySelection = (event: React.ChangeEvent<{}>, value: Industry | null) => {
    setIndustry(value);
  };

  useEffect(() => {
    const getIndustries = async (sectorId: number) => {
      const response = await getIndustriesBySectorId(sectorId, session?.jwt);
      setIndustries(response.result as Industry[]);
    };
    if (sector && sector.id != null) {
      getIndustries(sector.id);
    } else {
      setIndustries([]);
    }
  }, [sector, session?.jwt]);
return (...
     <SectorSelectDropdown
            options={sectors}
            onChange={handleSectorSelection}
            renderInput={(params) => <TextField {...params} label="Search" variant="outlined" />}
          />
          {industries && industries.length > 0 ? (
            <IndustrySelectDropdown
              options={industries}
              onChange={handleIndustrySelection}
              renderInput={(params) => <TextField {...params} label="Search" variant="outlined" />}
            />
          ) : null} ...)

sectors属性是从父组件传递下来的 API调用：

export async function getIndustriesBySectorId(sectorId: number, jwt?: string) {
  let result = null,
    error = null;
  if (!jwt) {
    throw new Error("Session JWT token not found.");
  }

  try {
    console.log(jwt);
    result = await fetch(`${process.env.NEXT_PUBLIC_POSITIONS_SERVICE_URL!}/industries/sector/${sectorId}`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
        Cookie: `Authentication=${jwt}`,
      },
      credentials: "include",
    });
    if (!result.ok) {
      throw new Error(`Failed to fetch industry: ${result.statusText}`);
    }

    const data: Industry[] = await result.json();

    return { result: data, error: null };
  } catch (e) {
    error = e;
    return { result: {}, error: error };
  }
}

如果我从服务器组件进行调用，我会更改此文件中的内容并直接获取会话数据（而不是传入它们），如下所示：

export async function getPositions() {
  const session = await getServerSession(authOptions);
  let result = null,
    error = null;

  if (!session?.jwt) {
    throw new Error("Session JWT token not found.");
  }...

那么，有没有一种方法可以完成我需要使用当前设置执行的操作？或者有没有办法使我当前的客户端组件成为服务器端组件？我是 NextJS 的新手，所以也许我的整个设置都是错误的？

Answer 1

我建议您为 api 调用执行服务器操作。这样，您只需更新 useEffect 即可调用服务器操作，而不是直接获取。 不要将任何身份验证或会话数据从客户端直接传递到服务器操作，而是在每个请求（服务器操作调用）上获取新的会话身份验证/数据。并且不要忘记在服务器上运行客户端输入之前验证输入，在大多数情况下使用中间件是一个非常好的解决方案。