Next.js调用依赖后端Cookie的API返回400错误求助

核心问题 #

前端fetch请求默认不会携带Cookie，尤其是你当前前端与后端端口不同的跨域场景，导致后端无法读取到refreshtoken Cookie，返回400错误。

解决方案 #

1. 前端Fetch请求添加凭证配置 #

修改客户端的fetch调用，新增credentials: 'include'选项，强制请求携带Cookie：

export const DataProvider = ({children}) => {
    const [token, setToken] = useState(false)

     useEffect(()=> {
        const firstLogin = localStorage.getItem('firstLogin')
        if(firstLogin){
            const refreshToken = async ()=>{
                const res = await fetch('http://localhost:8000/user/refresh-token', {
                    credentials: 'include' // 新增配置
                })
                const data = await res.json();
                // 可在此处处理返回的token，比如更新状态setToken(data.accessToken)
            }
            refreshToken()
         }
     }, [])
}

2. 后端配置CORS允许凭证 #

如果后端使用cors中间件，必须开启credentials: true，同时指定具体的前端域名（不能用通配符*）：

// Express框架示例配置
const cors = require('cors');
app.use(cors({
    origin: 'http://localhost:3000', // 替换为你的前端实际域名/端口
    credentials: true
}));

3. 优化Cookie跨域配置 #

跨域场景下，需调整Cookie的SameSite属性，避免浏览器拦截：

res.cookie('refreshtoken', refreshtoken, {
        httpOnly: true,
        path: '/user/refresh-token',
        maxAge: 1000 * 60 * 60 * 24 * 7,
        sameSite: 'none', // 跨域必须设置
        secure: process.env.NODE_ENV === 'production' // 生产环境HTTPS下启用
      });

4. 验证路径匹配 #

确保请求的接口路径/user/refresh-token与Cookie设置的path完全一致，路径不匹配会导致Cookie无法被携带。

验证方法 #

打开浏览器开发者工具（F12），在Network标签下查看/user/refresh-token请求：

• 检查Request Headers是否包含Cookie: refreshtoken=xxx
• 检查Response Headers的Set-Cookie属性是否符合配置要求

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