Render部署MERN应用无法用res.cookie()，如何传递Token？

方案1：响应体返回Token + 请求头携带 #

这是最直接的替代方式，完全不依赖Cookie，步骤如下：

后端代码修改 #

1. 注册/登录接口：把Token直接加入响应JSON返回，去掉res.cookie()：

const register = async (req, res) => {
    const user = await User.create({...req.body})
    const token = user.createJWT()
    // 将token放入响应体
    res.status(StatusCodes.CREATED).json({ name: user.name, token })
}

2. 认证中间件：从请求头的Authorization字段提取Token（格式为Bearer <token>）：

const authMiddleware = async (req, res, next) => {
    const authHeader = req.headers.authorization
    if (!authHeader || !authHeader.startsWith('Bearer ')) {
        throw new UnauthenticatedError('no token')
    }
    const token = authHeader.split(' ')[1]
    
    try {
        const {userId, name} = jwt.verify(token, process.env.JWT_SECRET)
        req.user = {userId, name}  
        next()
    } catch(error) {
        throw new UnauthenticatedError('Authentication invalid')
    }
}

前端处理 #

注册/登录成功后，把Token存在localStorage或sessionStorage：

// 注册请求的响应处理示例
const handleRegister = async () => {
    const res = await fetch('/api/auth/register', {
        method: 'POST',
        body: JSON.stringify(formData),
        headers: {'Content-Type': 'application/json'}
    })
    const data = await res.json()
    localStorage.setItem('token', data.token) // 持久化存储token
}

后续请求后端接口时，在请求头里带上Token：

const fetchProtectedData = async () => {
    const token = localStorage.getItem('token')
    const res = await fetch('/api/protected', {
        headers: {
            'Authorization': `Bearer ${token}`
        }
    })
    const data = await res.json()
}

方案2：内存存储Token（更安全） #

如果担心localStorage被XSS攻击窃取Token，可将Token存在前端内存中，比如用React Context或Redux这类状态管理工具：

前端示例（React Context） #

1. 创建Auth状态上下文：

import { createContext, useContext, useState } from 'react'

const AuthContext = createContext()

export const AuthProvider = ({ children }) => {
    const [token, setToken] = useState(null)

    const login = (newToken) => {
        setToken(newToken)
    }

    const logout = () => {
        setToken(null)
    }

    return (
        <AuthContext.Provider value={{ token, login, logout }}>
            {children}
        </AuthContext.Provider>
    )
}

export const useAuth = () => useContext(AuthContext)

2. 注册/登录后更新上下文状态：

const { login } = useAuth()

const handleRegister = async () => {
    const res = await fetch('/api/auth/register', { ... })
    const data = await res.json()
    login(data.token) // 将token存入内存
}

3. 请求时从上下文获取Token：

const { token } = useAuth()

const fetchProtectedData = async () => {
    const res = await fetch('/api/protected', {
        headers: {
            'Authorization': token ? `Bearer ${token}` : ''
        }
    })
    // 后续处理逻辑
}

这种方式的缺点是页面刷新后Token会丢失，用户需要重新登录，可结合sessionStorage在页面加载时恢复Token，平衡安全性和体验。

补充：尝试修复Cookie问题（可选） #

如果仍想尝试用Cookie，可能是配置参数问题，可修改res.cookie()的属性：

res.cookie('token', token, {
    httpOnly: true,
    secure: process.env.NODE_ENV === 'production', // 生产环境开启HTTPS安全属性
    sameSite: 'Lax', // 跨域场景可尝试设为'None'（需配合secure）
    maxAge: 30 * 24 * 60 * 60 * 1000 // 30天有效期
})

注意需确保前后端域名一致（比如同属Render子域名下的不同路径），否则跨域Cookie仍会失效，若此方法无效，再用前面的替代方案。

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