React项目调用PHP后端接口路径错误及服务端鉴权需求问题

一、修复404路径问题 #

你的fetch路径错误是因为浏览器解析相对路径基于当前页面URL，而非服务器文件系统路径。由于两个文件都对应网站根目录下的/demo/路径，建议使用绝对路径确保请求指向正确位置：

React.useEffect(() => {
  fetch('/demo/auth_endpoint.php') // 以网站根目录为起点的绝对路径
  .then(response => {
    if (response.status === 401) {
      router.push(`/login?sp=${encodeURIComponent(router.asPath)}`);
    }
  })
  .catch(error => console.error(error));
}, []);

如果React应用部署在/demo/下，当前页面URL是http://[server-ip]:[test-port]/demo/，./auth_endpoint.php也能生效，但绝对路径更稳定，避免页面路由变化导致的路径解析错误。

二、服务端执行登录验证（更安全的方案） #

前端验证完全不可靠——用户可通过修改代码跳过判断，必须将验证逻辑放在服务端执行，以下是React（尤其Next.js场景）的可行方案：

方案1：页面级服务端验证（Next.js getServerSideProps） #

在需要登录的页面中，用getServerSideProps在服务端直接验证session，无需前端发起fetch请求：

// 示例：pages/dashboard.tsx
export async function getServerSideProps(context) {
  // 服务端请求PHP验证接口
  const res = await fetch(`http://[server-ip]:[test-port]/demo/auth_endpoint.php`, {
    method: 'POST', // 用POST避免缓存，更符合验证操作语义
    headers: { 'Content-Type': 'application/json' },
    credentials: 'include', // 携带cookie，确保服务端读取session
  });

  if (res.status === 401) {
    return {
      redirect: {
        destination: `/login?sp=${encodeURIComponent(context.resolvedUrl)}`,
        permanent: false,
      },
    };
  }

  // 获取用户信息（可选）
  const user = await res.json();

  return { props: { user } };
}

function Dashboard({ user }) {
  return <div>欢迎，{user.username}</div>;
}

export default Dashboard;

方案2：全局中间件验证（Next.js Middleware） #

若所有页面都需登录验证，用Middleware全局拦截请求，无需每个页面单独写逻辑：

// middleware.ts
import { NextResponse } from 'next/server';
import type { NextRequest } from 'next/server';

export async function middleware(request: NextRequest) {
  // 排除登录页等无需验证的路径
  if (request.nextUrl.pathname.startsWith('/login')) {
    return NextResponse.next();
  }

  // 服务端请求PHP验证接口
  const res = await fetch(`${request.nextUrl.origin}/demo/auth_endpoint.php`, {
    method: 'POST',
    credentials: 'include',
    headers: { 'Content-Type': 'application/json' },
  });

  if (res.status === 401) {
    // 重定向到登录页，携带当前路径作为跳转目标
    const loginUrl = new URL('/login', request.nextUrl.origin);
    loginUrl.searchParams.set('sp', request.nextUrl.pathname);
    return NextResponse.redirect(loginUrl);
  }

  return NextResponse.next();
}

// 指定需要拦截的路径
export const config = {
  matcher: ['/dashboard/:path*', '/profile/:path*'], // 可改用 '/' 匹配所有路径
};

PHP验证端点（auth_endpoint.php）实现 #

确保PHP文件正确读取session并返回对应状态码：

<?php
session_start();

// 检查session中是否存在登录标识
if (!isset($_SESSION['user_id'])) {
  http_response_code(401);
  echo json_encode(['error' => '未登录']);
  exit;
}

// 已登录，返回用户信息（可选）
http_response_code(200);
echo json_encode([
  'user_id' => $_SESSION['user_id'],
  'username' => $_SESSION['username']
]);
?>

关键注意事项 #

• Session共享：若React应用（如Next.js）和PHP同服务器，确保两者使用相同的session存储（如默认文件存储或Redis），才能正确读取登录状态。
• Credentials设置：fetch请求必须添加credentials: 'include'，确保浏览器携带cookie，PHP才能读取session。

内容的提问来源于stack exchange，提问作者user8411456