基于Next.js与.NET后端，如何在服务端使用本地存储的Access Token取数？

方案1：将access_token存储到HttpOnly Cookie中（推荐） #

这是最通用且安全的解决方式，Cookie会自动在客户端与服务端的请求中携带，既满足服务端取数的需求，又能避免XSS攻击风险。

• 后端配置（.NET）：
  认证成功后，把access_token写入带HttpOnly、Secure属性的Cookie中，示例代码：

  var cookieOptions = new CookieOptions
  {
      HttpOnly = true,
      Secure = true, // 生产环境开启，仅HTTPS下有效
      SameSite = SameSiteMode.Strict,
      Expires = DateTime.UtcNow.AddHours(1) // 与token过期时间匹配
  };
  Response.Cookies.Append("access_token", accessToken, cookieOptions);
  

• Next.js服务端取数：
  在服务端组件、API路由或Server Actions中，通过Cookie解析出token，示例：

  import { cookies } from 'next/headers';
  
  async function fetchDataFromDotnet() {
    const cookieStore = cookies();
    const accessToken = cookieStore.get('access_token')?.value;
    if (!accessToken) {
      throw new Error('未获取到认证信息');
    }
    const res = await fetch('https://your-dotnet-api.com/data', {
      headers: {
        Authorization: `Bearer ${accessToken}`
      }
    });
    return res.json();
  }
  

方案2：客户端传递token到Next.js API路由 #

如果暂时无法修改Cookie存储逻辑，可以通过客户端将token传递给自定义的Next.js API路由，再由API路由中转调用.NET后端。

• 客户端组件调用API路由：

  async function fetchData() {
    const accessToken = localStorage.getItem('access_token');
    const res = await fetch('/api/fetch-data', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: `Bearer ${accessToken}`
      }
    });
    return res.json();
  }
  

• Next.js API路由（/pages/api/fetch-data.js）：

  export default async function handler(req, res) {
    const authHeader = req.headers.authorization;
    if (!authHeader) {
      return res.status(401).json({ error: '未授权' });
    }
    const dotnetRes = await fetch('https://your-dotnet-api.com/data', {
      headers: {
        Authorization: authHeader
      }
    });
    const data = await dotnetRes.json();
    res.status(200).json(data);
  }
  

方案3：使用Next.js Server Actions（App Router） #

如果采用Next.js App Router，可以直接用Server Actions在服务端执行数据请求，自动获取Cookie中的token（需配合方案1的Cookie存储逻辑）。

• 定义Server Action：

  'use server';
  
  import { cookies } from 'next/headers';
  
  export async function fetchDotnetData() {
    const accessToken = cookies().get('access_token')?.value;
    if (!accessToken) {
      throw new Error('请先登录');
    }
    const res = await fetch('https://your-dotnet-api.com/data', {
      headers: {
        Authorization: `Bearer ${accessToken}`
      },
      cache: 'no-store'
    });
    if (!res.ok) {
      throw new Error('数据请求失败');
    }
    return res.json();
  }
  

• 客户端组件调用：

  import { fetchDotnetData } from './actions';
  import { useState } from 'react';
  
  export default function ClientComponent() {
    const [data, setData] = useState(null);
  
    const loadData = async () => {
      const result = await fetchDotnetData();
      setData(result);
    };
  
    return (
      <div>
        <button onClick={loadData}>加载数据</button>
        {data && <pre>{JSON.stringify(data, null, 2)}</pre>}
      </div>
    );
  }
  

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