test-cors2

Sleeping

App Files Files Community

viocha commited on Aug 30

Commit

3aa06e5

1 Parent(s): d46749a

2

Browse files

Files changed (2) hide show

.idea/misc.xml +0 -3
app.js +45 -48

.idea/misc.xml CHANGED Viewed

@@ -7,9 +7,6 @@
   <component name="GoLibraries">
     <option name="indexEntireGoPath" value="true" />
   </component>
-  <component name="GoVcsConfiguration">
-    <option name="GO_FMT" value="false" />
-  </component>
   <component name="ProjectInspectionProfilesVisibleTreeState">
     <entry key="Project Default">
       <profile-state>

   <component name="GoLibraries">
     <option name="indexEntireGoPath" value="true" />
   </component>
   <component name="ProjectInspectionProfilesVisibleTreeState">
     <entry key="Project Default">
       <profile-state>

app.js CHANGED Viewed

@@ -4,82 +4,80 @@ 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>
@@ -87,7 +85,6 @@ app.get('/', (req, res) => {
   `);
 });
-// 最终修正：此处的 console.log 语法是正确的。
 app.listen(PORT, () => {
 	console.log(`Server is running on port ${PORT}`);
 });

 const app = express();
 const PORT = process.env.PORT || 7860;
+// --- CORS 详细配置 (最终正确版本) ---
+const corsOptions = {
+	origin: '*',
+	methods: ['GET', 'POST', 'PUT', 'DELETE'],
+	allowedHeaders: ['Content-Type', 'Authorization'],
+	// 只需暴露非 CORS 安全列表中的自定义头
+	exposedHeaders: ['X-Custom-Header-Test'],
+	credentials: false,
+	maxAge: 86400,
+};
+app.use(cors(corsOptions));
+// --- 中间件和路由 ---
 app.use((req, res, next) => {
 	res.setHeader('X-Custom-Header-Test', 'HuggingFace-Express-App-Works');
 	next();
 });
 app.get('/api', (req, res) => {
 	res.json({
+		message: 'API is working! CORS is correctly configured.',
 		timestamp: new Date().toISOString(),
 	});
 });
 app.get('/', (req, res) => {
+	const origin = `${req.protocol}://${req.get('host')}`;
+	// 在 fetch 代码中可以同时获取 Content-Length 和 X-Custom-Header-Test
+	const fetchCode = `fetch('${origin}/api')
+  .then(response => {
+    console.log('Status:', response.status);
+    // 'Content-Length' 是安全头，默认可访问
+    console.log('Content-Length:', response.headers.get('Content-Length'));
+    // 'X-Custom-Header-Test' 是非安全头，因已暴露，所以也可访问
+    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));`;
 	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: -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; }
+        p { font-size: 1.1em; }
+        pre { background-color: #f3f4f6; padding: 1.5em; border-radius: 8px; white-space: pre-wrap; word-wrap: break-word; }
+        code { font-family: "Courier New", Courier, monospace; font-size: 1.1em; }
+        .copy-notice { font-size: 0.9em; color: #6b7280; margin-top: 1em; text-align: center; }
       </style>
     </head>
     <body>
       <div class="container">
+        <h1>Express.js 应用已部署</h1>
+        <p>CORS 策略已正确配置。请复制以下代码到浏览器开发者工具中进行测试，它将同时读取一个安全头 (Content-Length) 和一个已暴露的自定义头 (X-Custom-Header-Test)。</p>
+        <pre><code id="fetch-code">${fetchCode}</code></pre>
+        <p class="copy-notice">点击上面的代码块即可复制。</p>
       </div>
       <script>
+        document.getElementById('fetch-code').parentElement.addEventListener('click', function() {
+          navigator.clipboard.writeText(document.getElementById('fetch-code').innerText).then(() => {
+            alert('代码已复制到剪贴板！');
+          }).catch(err => {
+            console.error('无法复制: ', err);
+          });
         });
       </script>
     </body>
   `);
 });
 app.listen(PORT, () => {
 	console.log(`Server is running on port ${PORT}`);
 });