| import express from 'express'; |
| import cors from 'cors'; |
|
|
| const app = express(); |
| const PORT = process.env.PORT || 7860; |
|
|
| |
| app.use(express.json()); |
|
|
| |
| |
| const corsOptions = { |
| origin: '*', |
| methods: '*', |
| allowedHeaders: '*', |
| exposedHeaders: '*', |
| maxAge: 10, |
| }; |
| app.use(cors(corsOptions)); |
|
|
|
|
| |
| app.use((req, res, next) => { |
| res.setHeader('X-Custom-Header-Test', 'HuggingFace-Express-App-Works'); |
| next(); |
| }); |
|
|
|
|
| |
|
|
| |
| app.all('/api', (req, res) => { |
| res.json({ |
| message: `API is working! Request received with method: ${req.method}.`, |
| methodUsed: req.method, |
| bodyReceived: req.body, |
| timestamp: new Date().toISOString(), |
| }); |
| }); |
|
|
| |
| 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: -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; min-height: 150px; cursor: pointer; } |
| 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 App Deployed</h1> |
| <p>Please copy the following dynamically generated <code>fetch</code> POST request code into your browser's developer console to test:</p> |
| <pre><code id="fetch-code"><!-- Code will be dynamically populated here by JS --></code></pre> |
| <p class="copy-notice">Click the code block above to copy.</p> |
| </div> |
| |
| <script> |
| document.addEventListener('DOMContentLoaded', () => { |
| const codeElement = document.getElementById('fetch-code'); |
| const origin = window.location.origin; |
| |
| // 注意：这里的反斜杠是必需的，因为这段JS代码本身是位于一个父模板字符串中 |
| const fetchCode = \`fetch('\${origin}/api', { |
| method: 'POST', |
| headers: { |
| 'Content-Type': 'application/json' |
| }, |
| body: JSON.stringify({ user: 'test-user', action: 'check-cors' }) |
| }) |
| .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));\`; |
| |
| codeElement.textContent = fetchCode; |
| }); |
| |
| document.querySelector('pre').addEventListener('click', function() { |
| const codeToCopy = document.getElementById('fetch-code').innerText; |
| navigator.clipboard.writeText(codeToCopy).then(() => { |
| alert('Code copied to clipboard!'); |
| }).catch(err => { |
| console.error('Failed to copy: ', err); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |
| `); |
| }); |
|
|
| app.listen(PORT, () => { |
| console.log(`Server is running at http://localhost:${PORT}`); |
| }); |
