website/test-frontend-api.html

<!DOCTYPE html>
<html>
<head>
    <title>API连接测试</title>
</head>
<body>
    <h1>前端API连接测试</h1>
    <button onclick="testAPI()">测试API连接</button>
    <div id="result"></div>

    <script>
        async function testAPI() {
            const resultDiv = document.getElementById('result');
            resultDiv.innerHTML = '正在测试...';

            try {
                console.log('开始测试API连接...');
                
                const response = await fetch('http://localhost:3002/api/news?limit=3', {
                    headers: {
                        'X-API-Key': 'omniverse_news_2024',
                        'Content-Type': 'application/json',
                    },
                });

                console.log('API响应状态:', response.status);

                if (!response.ok) {
                    throw new Error(`API请求失败: ${response.status}`);
                }

                const data = await response.json();
                console.log('API数据:', data);

                resultDiv.innerHTML = `
                    <h2>✅ API连接成功</h2>
                    <p>状态码: ${response.status}</p>
                    <p>返回新闻数量: ${data.data?.length || 0}</p>
                    <h3>第一条新闻:</h3>
                    <pre>${JSON.stringify(data.data?.[0] || {}, null, 2)}</pre>
                `;
            } catch (error) {
                console.error('API测试失败:', error);
                resultDiv.innerHTML = `
                    <h2>❌ API连接失败</h2>
                    <p>错误: ${error.message}</p>
                `;
            }
        }
    </script>
</body>
</html>