问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

nextjs 15.1.7 版本，路由中设置 cookies 为什么无效？

头像
kaipizhe
    1.6k29197275

    路由：/api/auth/login/route.ts

    import {NextResponse} from "next/server";

// POST /api/auth/login
export async function POST(request: Request) {
    const { account, password } = await request.json();

    const res = await fetch('http://localhost:8081/auth/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify({
            account,
            password,
        }),
    });
    const data = await res.json();

    const response = NextResponse.json(data);

    response.cookies.set('token', data.data, {
        httpOnly: true,
        // secure: true,
        // sameSite: 'strict',
        maxAge: 86400
    });

    return response;
}

    这样不对吗？就是没有值

    前端cookiesnextjs
    阅读 658
    avatarAI BotBETA
    在 Next.js 15.1.7 中，设置 cookies 的方式确实有所变化，特别是在 API 路由中。从你提供的代码来看，你正在尝试使用 `NextResponse.cookies.set` 方法来设置 cookie，但实际上，你应该直接将 cookie 设置操作包含在 `NextResponse.json()` 的选项中。

在 Next.js 15 中，`NextResponse` 的构造函数和一些方法的行为有所更新，特别是关于如何处理 cookies。你应该在创建 `NextResponse` 实例时，通过第二个参数直接传递 cookies 设置。

下面是修改后的代码：

    import { NextResponse } from "next/server";

    // POST /api/auth/login
    export async function POST(request: Request) {

    const { account, password } = await request.json();

const res = await fetch('http://localhost:8081/auth/login', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        account,
        password,
    }),
});
const data = await res.json();

// 直接在 NextResponse.json() 的选项中设置 cookies
const response = NextResponse.json(data, {
    headers: {
        'Set-Cookie': `token=${data.data}; HttpOnly; Max-Age=86400; Path=/`
        // 如果需要 secure 和 sameSite 属性，可以根据需要添加
        // 'Set-Cookie': `token=${data.data}; HttpOnly; Secure; SameSite=Strict; Max-Age=86400; Path=/`
    }
});

return response;

    }

    
注意几个关键点：
1. 使用 `headers` 属性直接在 `NextResponse.json()` 的选项中设置 `Set-Cookie`。
2. 确保 cookie 的路径（`Path=/`）和其他属性（如 `Secure` 和 `SameSite`）根据你的需求正确设置。
3. 由于 `secure` 属性要求 HTTPS 连接，如果你在本地开发环境中没有使用 HTTPS，可能需要注释掉这一行，或者在本地启用 HTTPS。

这样修改后，cookie 应该能够正确设置了。
    1 个回答
    得票最新
    头像
    kaipizhe
      1.6k29197275

      找到了官方文档：https://nextjs.org/docs/app/building-your-application/data-fe...

      'use server'
 
import { redirect } from 'next/navigation'
import { revalidateTag } from 'next/cache'
 
export async function createPost(id: string) {
  try {
    // ...
  } catch (error) {
    // ...
  }
 
  revalidateTag('posts') // Update cached posts
  redirect(`/post/${id}`) // Navigate to the new post page
}
      撰写回答
      你尚未登录，登录后可以
      • 和开发者交流问题的细节
      • 关注并接收问题和回答的更新提醒
      • 参与内容的编辑和改进，让解决方法与时俱进
      推荐问题