搭建Commerce.js React应用时触发401错误（JavaScript Mastery教程）

跟随JavaScript Mastery教程学习（第28/39天），此前API Key正常使用，现在突然出现401错误：
❌ HTTP ERROR [401] Type: The provided API key is not valid.
Uncaught (in promise) 401 received index.js 1

已尝试的排查动作：

• 未修改过API Key
• 推测练习购物车过期，代码仍在查找旧Token
• 重新生成API Key并替换到.env文件
• 已安装dotenv，确认.env在项目根目录

核心解决步骤： #

1. 修正.env文件格式错误
   你的.env文件中REACT_APP_CHEC_PUBLIC_KEY=xxxx;末尾多了分号，这会导致Key被附带无效字符，直接引发验证失败。修改为：

   REACT_APP_CHEC_PUBLIC_KEY=xxxx
   NODE_PATH=./src
   

2. 强制重启开发服务器
   React项目仅在启动时加载环境变量，修改.env后必须重启服务器，否则新Key不会生效。

3. 确认API Key类型与正确性
   登录Chec后台，确保复制的是公钥（Public Key），私钥（Secret Key）不能在前端使用，否则会直接触发401错误。

4. 重置购物车会话
   旧Key创建的购物车会话无法被新Key访问，可通过以下方式重置：

   • 清空浏览器本地存储与缓存
   • 调用commerce.cart.empty()接口清空旧购物车，再重新创建会话

5. 验证环境变量加载状态
   在commerce.js中临时添加日志，确认Key是否正确读取：

   import Commerce from "@chec/commerce.js";
   console.log('Loaded API Key:', process.env.REACT_APP_CHEC_PUBLIC_KEY); // 检查控制台输出
   export const commerce = new Commerce(process.env.REACT_APP_CHEC_PUBLIC_KEY, true);
   

   注意：生产环境务必删除该日志，避免泄露Key

相关代码： #

App.js

import React, { useState, useEffect } from 'react';
import { commerce } from './lib/commerce';
import {Products, Navbar, Cart, Checkout} from './components';
import {
    BrowserRouter as Router,
    Routes,
    Route,
} from "react-router-dom";
import './App.css';

const App = () => {
    const [products, setProducts] = useState([]);
    const [cart, setCart] = useState({});

    const fetchProducts = async () => {
        const {data } = await commerce.products.list();
        setProducts(data);
    }

    const fetchCart = async () => {
        setCart(await commerce.cart.retrieve())
    }

    const handleAddToCart = async (productId, quantity) => {
         const {cart} = await commerce.cart.add(productId, quantity);
         setCart(cart);
    }

    const handleUpdateCartQty = async (productId, quantity) => {
        const {cart} = await commerce.cart.update(productId, { quantity })
        setCart(cart)
    }

    const handleRemoveFromCart = async (productId) => {
        const {cart} = await commerce.cart.remove(productId);
        setCart(cart);
    }

    const handleEmptyCart = async () => {
        const {cart} = await commerce.cart.empty();
        setCart(cart);
    }

    useEffect(() => {
        fetchProducts();
        fetchCart();
    }, []);

    return (
        <Router>
            <div>
                <Navbar/>
                <Routes>
                    <Route path='/' element={<Products products = {products} onAddToCart = {handleAddToCart}/>} />
                    <Route path='/cart' element={
                        <Cart 
                            cart={cart} 
                            handleUpdateCartQty={handleUpdateCartQty}
                            handleRemoveFromCart={handleRemoveFromCart}
                            handleEmptyCart={handleEmptyCart}/>
                        } 
                    />
                    <Route path='/checkout' element={<Checkout cart={cart}/>} />
                </Routes>
            </div>
        </Router>
    )
}

export default App;

commerce.js

import Commerce from "@chec/commerce.js";
export const commerce = new Commerce(process.env.REACT_APP_CHEC_PUBLIC_KEY, true);

原.env文件（存在格式问题）

REACT_APP_CHEC_PUBLIC_KEY=xxxx;
NODE_PATH=./src

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