Next13 + Strapi + Axios 跨域CORS错误排查求助

核心问题1：API请求路径错误 #

控制台报错的请求地址是http://127.0.0.1:3000/src/app/api/auth/user，这是把本地文件路径当成了API路由路径。Next.js App Router的API路由对外暴露的路径是/api/xxx，不需要带src/app/前缀。

修复方法： #

修改/src/context/user.js中所有linstance的请求路径：

• 原linstance.post('/src/app/api/auth/logout' → 改为linstance.post('/api/auth/logout'
• 原linstance.get('/src/app/api/auth/user' → 改为linstance.get('/api/auth/user'
• 原linstance.post('/src/app/api/auth/login' → 改为linstance.post('/api/auth/login'

核心问题2：Route Handler写法错误（App Router适配问题） #

你用了App Router，但Route Handler的写法还是Pages Router的风格（比如使用res参数、res.setHeader），App Router的Route Handler只接收req参数，需要直接构建Response对象返回。

修复示例（以/src/app/api/auth/login/route.js为例）： #

import axios from '../../../../lib/api';
import cookie from 'cookie';

export async function POST(req) {
  try {
    // 解析请求体
    const body = await req.json();
    // 请求外部认证服务
    const response = await axios.post('api/auth/local', body);
    
    const jwt = response.data.jwt;
    const id = response.data.user.id;

    // 构建Cookie
    const cookies = [
      cookie.serialize('token', jwt, {
        httpOnly: true,
        secure: process.env.NODE_ENV !== 'development',
        maxAge: 60 * 60 * 24 * 7, // 1周
        sameSite: 'strict',
        path: '/',
      }),
      cookie.serialize('userid', id, {
        httpOnly: true,
        secure: process.env.NODE_ENV !== 'development',
        maxAge: 60 * 60 * 24 * 7,
        sameSite: 'strict',
        path: '/',
      }),
    ];

    // 返回Response，同时添加CORS响应头
    return new Response(JSON.stringify({ message: response.data.user }), {
      status: 200,
      headers: {
        'Set-Cookie': cookies,
        'Access-Control-Allow-Origin': 'http://127.0.0.1:3000',
        'Content-Type': 'application/json',
      },
    });
  } catch (error) {
    const errorMessage = error.response?.data?.error?.message || 'Internal server error';
    const statusCode = error.response?.status || 500;

    return new Response(JSON.stringify({ message: errorMessage }), {
      status: statusCode,
      headers: {
        'Access-Control-Allow-Origin': 'http://127.0.0.1:3000',
        'Content-Type': 'application/json',
      },
    });
  }
}

核心问题3：中间件配置错误 #

你在中间件里设置了请求头Access-Control-Allow-Origin，但这个头是服务器返回给客户端的响应头，设置请求头完全无效。同时需要处理浏览器的OPTIONS预检请求。

修复/src/middleware.js： #

import { NextResponse } from 'next/server'

export function middleware(request) {
  const response = NextResponse.next();

  // 添加CORS响应头
  response.headers.set('Access-Control-Allow-Origin', 'http://127.0.0.1:3000');
  response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');

  // 处理OPTIONS预检请求（浏览器跨域前会自动发送）
  if (request.method === 'OPTIONS') {
    return new Response(null, {
      status: 204,
      headers: {
        'Access-Control-Allow-Origin': 'http://127.0.0.1:3000',
        'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
        'Access-Control-Allow-Headers': 'Content-Type, Authorization',
      },
    });
  }

  return response;
}

// 指定中间件只作用于API路由
export const config = {
  matcher: '/api/:path*',
};

其他次要问题修复 #

1. useRouter导入错误：/src/app/login/page.js中导入useRouter时缺少大括号，改为：

import { useRouter } from 'next/navigation';

2. 移除无效的Axios请求头：你在Axios请求中添加的Access-Control-Allow-Origin请求头完全没用，直接删除即可。

验证步骤 #

1. 重启Next.js开发服务器
2. 打开浏览器控制台，检查请求路径是否变为/api/auth/user
3. 查看响应头是否包含Access-Control-Allow-Origin: http://127.0.0.1:3000

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