test-cors2

Sleeping

App Files Files Community

viocha commited on Aug 30

Commit

d46749a

1 Parent(s): 14d71e0

1

Browse files

Files changed (3) hide show

.idea/git_toolbox_prj.xml +15 -0
.idea/misc.xml +0 -8
app.js +60 -40

.idea/git_toolbox_prj.xml ADDED Viewed

	@@ -0,0 +1,15 @@

+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="GitToolBoxProjectSettings">
+    <option name="commitMessageIssueKeyValidationOverride">
+      <BoolValueOverride>
+        <option name="enabled" value="true" />
+      </BoolValueOverride>
+    </option>
+    <option name="commitMessageValidationEnabledOverride">
+      <BoolValueOverride>
+        <option name="enabled" value="true" />
+      </BoolValueOverride>
+    </option>
+  </component>
+</project>

.idea/misc.xml CHANGED Viewed

@@ -3,9 +3,6 @@
   <component name="AhkProjectSettings">
     <option name="defaultAhkSdk" value="AutoHotkey v2.0.10" />
   </component>
-  <component name="FormatOnSaveOptions">
-    <option name="myRunOnSave" value="false" />
-  </component>
   <component name="GOROOT" url="file://$PROJECT_DIR$/../../../../Program Files/Go" />
   <component name="GoLibraries">
     <option name="indexEntireGoPath" value="true" />
@@ -243,9 +240,4 @@
   <component name="ProjectRootManager" version="2" languageLevel="JDK_21" default="true" project-jdk-name="21" project-jdk-type="JavaSDK">
     <output url="file://$PROJECT_DIR$/out" />
   </component>
-  <component name="VcsManagerConfiguration">
-    <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
-    <option name="CHECK_NEW_TODO" value="false" />
-    <option name="NON_MODAL_COMMIT_POSTPONE_SLOW_CHECKS" value="false" />
-  </component>
 </project>

   <component name="AhkProjectSettings">
     <option name="defaultAhkSdk" value="AutoHotkey v2.0.10" />
   </component>
   <component name="GOROOT" url="file://$PROJECT_DIR$/../../../../Program Files/Go" />
   <component name="GoLibraries">
     <option name="indexEntireGoPath" value="true" />
   <component name="ProjectRootManager" version="2" languageLevel="JDK_21" default="true" project-jdk-name="21" project-jdk-type="JavaSDK">
     <output url="file://$PROJECT_DIR$/out" />
   </component>
 </project>

app.js CHANGED Viewed

@@ -2,57 +2,84 @@ import express from 'express';
 import cors from 'cors';
 const app = express();
-// Hugging Face Spaces 默认使用 7860 端口
 const PORT = process.env.PORT || 7860;
-// 配置 CORS 中间件以允许所有来源的请求
 app.use(cors());
-// 定义一个中间件来为所有响应添加自定义响应头
 app.use((req, res, next) => {
-  res.setHeader('X-Custom-Header-Test', 'HuggingFace-Express-App-Works');
-  next();
 });
-// 根路由，返回一个 HTML 页面
 app.get('/', (req, res) => {
-  res.send(`
     <!DOCTYPE html>
     <html lang="en">
     <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
-      <title>Express App on Hugging Face</title>
       <style>
-        body { font-family: sans-serif; line-height: 1.6; padding: 2em; background-color: #f4f4f9; color: #333; }
-        .container { max-width: 800px; margin: auto; background: white; padding: 2em; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
-        h1 { color: #555; }
-        p { font-size: 1.1em; }
-        code { background-color: #eee; padding: 0.8em; border-radius: 4px; display: block; white-space: pre-wrap; word-wrap: break-word; cursor: pointer; }
-        .copy-notice { font-size: 0.9em; color: #888; margin-top: 0.5em; }
       </style>
     </head>
     <body>
       <div class="container">
-        <h1>Express.js 应用已成功部署！</h1>
-        <p>要测试 API，请打开浏览器的开发者工具（按 F12），切换到 "Console"（控制台）选项卡，然后粘贴并运行以下代码：</p>
-        <code id="fetch-code">fetch(window.location.origin + '/api')
-  .then(response => {
-    console.log('Status:', response.status);
-    console.log('Custom Header "X-Custom-Header-Test":', response.headers.get('X-Custom-Header-Test'));
-    return response.json();
-  })
-  .then(data => console.log('Data:', data))
-  .catch(error => console.error('Error:', error));</code>
-        <p class="copy-notice">点击上面的代码块即可复制。</p>
       </div>
       <script>
-        document.getElementById('fetch-code').addEventListener('click', function() {
-          navigator.clipboard.writeText(this.innerText).then(() => {
-            alert('代码已复制到剪贴板！');
-          }).catch(err => {
-            console.error('无法复制文本: ', err);
-          });
         });
       </script>
     </body>
@@ -60,14 +87,7 @@ app.get('/', (req, res) => {
   `);
 });
-// API 路由，返回 JSON 数据
-app.get('/api', (req, res) => {
-  res.json({
-    message: 'API is working!',
-    timestamp: new Date().toISOString()
-  });
-});
 app.listen(PORT, () => {
-  console.log(`Server is running on port ${PORT}`);
 });

 import cors from 'cors';
 const app = express();
 const PORT = process.env.PORT || 7860;
+// 配置 CORS 中间件
 app.use(cors());
+// 中间件：为所有响应添加自定义头
 app.use((req, res, next) => {
+	res.setHeader('X-Custom-Header-Test', 'HuggingFace-Express-App-Works');
+	next();
 });
+// API 路由，返回 JSON 数据
+app.get('/api', (req, res) => {
+	res.json({
+		message: 'API is working!',
+		timestamp: new Date().toISOString(),
+		deployedOn: 'Hugging Face Spaces'
+	});
+});
+// 根路由，返回一个交互式的 HTML 测试页面
 app.get('/', (req, res) => {
+	res.send(`
     <!DOCTYPE html>
     <html lang="en">
     <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
+      <title>Express App Tester</title>
       <style>
+        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.6; padding: 2em; background-color: #f9fafb; color: #111827; }
+        .container { max-width: 800px; margin: auto; background: white; padding: 2em; border-radius: 12px; box-shadow: 0 4px 20px rgba(0,0,0,0.05); }
+        h1 { color: #1f2937; }
+        button { font-size: 1em; font-weight: bold; color: white; background-color: #3b82f6; border: none; padding: 0.8em 1.5em; border-radius: 8px; cursor: pointer; transition: background-color 0.2s; }
+        button:hover { background-color: #2563eb; }
+        #results { background-color: #f3f4f6; padding: 1em; border-radius: 8px; margin-top: 1.5em; white-space: pre-wrap; word-wrap: break-word; font-family: "Courier New", Courier, monospace; }
+        .loading { color: #6b7280; }
+        .error { color: #ef4444; }
       </style>
     </head>
     <body>
       <div class="container">
+        <h1>Express.js 应用测试页面</h1>
+        <p>点击下面的按钮，页面将自动向 <code>/api</code> 端点发起一个 fetch 请求，并在此处显示完整的响应结果。</p>
+        <button id="test-btn">测试 API</button>
+        <pre id="results">点击按钮开始测试...</pre>
       </div>
       <script>
+        const testButton = document.getElementById('test-btn');
+        const resultsContainer = document.getElementById('results');
+        testButton.addEventListener('click', async () => {
+          resultsContainer.textContent = '正在请求...';
+          resultsContainer.className = 'loading';
+          const apiUrl = window.location.origin + '/api';
+          try {
+            const response = await fetch(apiUrl);
+            const data = await response.json();
+            const customHeader = response.headers.get('X-Custom-Header-Test');
+            const resultText =
+              '--- RESPONSE ---\\n' +
+              'Status Code: ' + response.status + '\\n' +
+              'Status Text: ' + response.statusText + '\\n\\n' +
+              'Custom Header (X-Custom-Header-Test): ' + (customHeader || '未找到') + '\\n\\n' +
+              'Body (JSON):\\n' +
+              JSON.stringify(data, null, 2);
+            resultsContainer.textContent = resultText;
+            resultsContainer.className = '';
+          } catch (error) {
+            resultsContainer.textContent = '请求失败: \\n' + error;
+            resultsContainer.className = 'error';
+          }
         });
       </script>
     </body>
   `);
 });
+// 最终修正：此处的 console.log 语法是正确的。
 app.listen(PORT, () => {
+	console.log(`Server is running on port ${PORT}`);
 });