检查 API 配置 - Console 方法

⚠️ 问题

在浏览器 Console 中直接执行 import.meta.env.VITE_API_URL 会报错：

Uncaught SyntaxError: Cannot use 'import.meta' outside a module

这是因为 import.meta 只能在 ES 模块上下文中使用。

✅ 替代检查方法

方法 1: 检查实际 API 请求（推荐）

步骤:

打开开发者工具（F12）
切换到 Network 标签
尝试注册或登录
查看请求的 URL

应该看到:

POST http://localhost:8000/api/v1/users/register
或 POST http://localhost:8000/api/v1/users/login

如果看到:

https://mbe-dev.hi-maker.com/... → 说明配置未更新，需要重启应用

方法 2: 测试后端连接

在 Console 中执行：

// 测试后端连接（不依赖 import.meta）
fetch('http://localhost:8000/api/health')
  .then(res => {
    console.log('✅ 后端连接成功 - 状态码:', res.status)
    return res.json()
  })
  .then(data => {
    console.log('📋 响应数据:', data)
    console.log('✅ API 配置正确: 使用 http://localhost:8000')
  })
  .catch(err => {
    console.error('❌ 后端连接失败:', err.message)
    console.log('💡 可能原因:')
    console.log('   1. 后端服务未运行')
    console.log('   2. API URL 配置错误')
    console.log('   3. 网络问题')
  })

方法 3: 检查 Network 标签中的请求

打开 Network 标签
清空请求列表（点击 🚫 图标）
尝试注册或登录
查看第一个请求：
- Name: register 或 login
- Status: 应该是 200 或 201
- Type: xhr 或 fetch
- URL: 点击查看完整 URL

检查 URL:

✅ 正确: http://localhost:8000/api/v1/users/register
❌ 错误: https://mbe-dev.hi-maker.com/api/v1/users/register

方法 4: 检查源代码（高级）

如果应用已加载，可以检查：

// 检查 window 对象中是否有配置
console.log('Window config:', window.__MBE_CONFIG__)

// 检查全局变量（如果应用有暴露）
console.log('Global API URL:', window.API_URL)

🔍 完整验证脚本

在 Console 中执行以下完整验证：

// ===== MBE Desktop API 配置验证 =====
console.log('%c🔍 API 配置验证', 'font-size: 16px; font-weight: bold; color: #3b82f6;')
console.log('='.repeat(50))

// 1. 测试后端连接
console.log('\n1️⃣ 测试后端连接:')
fetch('http://localhost:8000/api/health')
  .then(res => {
    if (res.ok) {
      console.log('   ✅ 后端服务正常 - 状态码:', res.status)
      return res.json()
    } else {
      throw new Error('HTTP ' + res.status)
    }
  })
  .then(data => {
    console.log('   📋 响应:', data)
  })
  .catch(err => {
    console.log('   ❌ 连接失败:', err.message)
    console.log('   💡 请确认后端服务运行在 http://localhost:8000')
  })

// 2. 检查 Network 标签提示
console.log('\n2️⃣ 检查 Network 标签:')
console.log('   📋 请切换到 Network 标签，尝试注册/登录')
console.log('   📋 查看请求 URL 是否为: http://localhost:8000/api/v1/users/...')

// 3. 检查 Token（如果已登录）
console.log('\n3️⃣ 检查 Token 存储:')
const token = localStorage.getItem('mbe_access_token')
if (token) {
  console.log('   ✅ Access Token 存在 (' + token.length + ' 字符)')
  try {
    const payload = JSON.parse(atob(token.split('.')[1]))
    console.log('   📋 Token 详情:', {
      email: payload.email,
      expires_at: new Date(payload.exp * 1000).toLocaleString('zh-CN')
    })
  } catch (e) {
    console.log('   ⚠️ Token 解码失败')
  }
} else {
  console.log('   ℹ️ 未登录，Token 不存在')
}

console.log('\n' + '='.repeat(50))
console.log('%c✅ 验证完成', 'font-size: 14px; font-weight: bold; color: #10b981;')

📋 快速检查清单

Network 标签中请求 URL 为 http://localhost:8000
后端健康检查成功（fetch('http://localhost:8000/api/health') 返回 200）
注册/登录请求成功（状态码 200/201）
无 CORS 错误
Token 正确保存

最后更新: 2026-02-08