开发环境Post请求正常，生产/测试环境提示token undefined问题排查

问题概述 #

开发博客应用时，创建新博客的token验证功能在开发环境正常，但生产环境返回401 unauthorised及token undefined错误，需定位token相关逻辑的问题并修复。

相关代码片段 #

前端token管理与创建博客请求 #

import axios from 'axios'
const baseUrl = '/api/blogs'

let token = null

const setToken = newToken => {
  token = `Bearer ${newToken}`
}

const create = async newObject => {
  const config = {
    headers: { Authorization: token },
  }

  const response = await axios.post(baseUrl, newObject, config)
  return response.data
}

前端创建博客调用逻辑 #

const blogFormRef = useRef()

const createBlog = (blogObject) => {
    blogFormRef.current.toggleVisibility()
    blogService
        .create(blogObject)
        .then(returnedBlog => {
            setBlogs(blogs.concat(returnedBlog))
            setErrorMessage(`A new blog ${blogObject.title} by ${blogObject.author} added`)
            setTimeout(() => {
                setErrorMessage(null)
            }, 5000)
        })
}

前端登录函数（含token设置） #

const handleLogin = async (handleLogin) => {
    const username = handleLogin.username;
    const password = handleLogin.password;

  try {
      const user = await loginService.login({
          username, password,
      })

      window.localStorage.setItem(
          'loggedBlogappUser', JSON.stringify(user)
      )
      blogService.setToken(user.token)
      setUser(user)
      setErrorMessage('You are logged in!')
      setTimeout(() => {
          setErrorMessage(null)
      }, 5000)
  } catch (exception) {
      setErrorMessage('Wrong credentials')
      setTimeout(() => {
          setErrorMessage(null)
      }, 5000)
  }
}

后端路由与token验证逻辑 #

const blogsRouter = require('express').Router()
const Blog = require('../models/blog')
const User = require('../models/user')
const jwt = require('jsonwebtoken')

const getTokenFrom = request => {
  const authorization = request.get('authorization')
  if (authorization && authorization.startsWith('Bearer ')) 
  {
      return authorization.replace('Bearer ', '')
  }
  return null
}

blogsRouter.post('/', async (request, response) => {
  const body = request.body

  const decodedToken = jwt.verify(getTokenFrom(request), process.env.SECRET)
  if (!decodedToken.id) {
      return response.status(401).json({ error: 'token invalid' })
  }

  const user = await User.findById(decodedToken.id)

  const blog = new Blog ({
      title: body.title,
      author: body.author,
      url: body.url,
      likes: body.likes || 0,
      user: user._id
  })

  const savedBlog = await blog.save()
  user.blogs = user.blogs.concat(savedBlog._id)
  await user.save()

  response.status(201).json(savedBlog)
})

排查方向与修复建议 #

1. 页面刷新后Token丢失（核心大概率问题） #

当前登录后仅将token存入内存变量token和localStorage，但应用初始化（如页面刷新）时未从localStorage恢复token，导致生产环境刷新页面后token变量重置为null，请求时未携带Authorization头。

修复： 在应用根组件（如App.js）中添加初始化逻辑，读取localStorage并设置token：

useEffect(() => {
  const loggedUserJSON = window.localStorage.getItem('loggedBlogappUser')
  if (loggedUserJSON) {
    const user = JSON.parse(loggedUserJSON)
    blogService.setToken(user.token)
    setUser(user)
  }
}, [])

2. 生产环境CORS与请求头配置问题 #

生产环境若前后端域名分离，需确保后端CORS配置允许Authorization请求头传递，否则浏览器会拦截该头，导致后端无法获取token。

检查： 后端CORS配置需包含Access-Control-Allow-Headers: Authorization，例如：

const cors = require('cors')
app.use(cors({
  allowedHeaders: ['Content-Type', 'Authorization']
}))

3. 后端环境变量SECRET配置 #

生产环境需确保process.env.SECRET已正确配置，若密钥缺失或与开发环境不一致，jwt.verify会抛出错误，间接导致token验证失败。

检查： 在后端启动脚本中设置环境变量，或使用.env文件（需确保生产环境加载该文件）。

4. 前端BaseUrl配置验证 #

生产环境需确认baseUrl指向正确的后端地址，若地址错误导致跨域或请求发送到无效地址，也会出现token未正确传递的情况。

验证： 查看生产环境网络请求的地址与请求头，确认Authorization头是否存在。

内容的提问来源于stack exchange，提问作者aks.asj