Spaces:
Sleeping
Sleeping
app.js
CHANGED
|
@@ -4,14 +4,17 @@ import cors from 'cors';
|
|
| 4 |
const app = express();
|
| 5 |
const PORT = process.env.PORT || 7860;
|
| 6 |
|
| 7 |
-
//
|
|
|
|
|
|
|
|
|
|
| 8 |
app.set('trust proxy', 1);
|
| 9 |
|
| 10 |
// --- CORS 配置 ---
|
| 11 |
-
//
|
| 12 |
const corsOptions = {
|
| 13 |
origin: '*',
|
| 14 |
-
methods:
|
| 15 |
allowedHeaders: ['Content-Type', 'Authorization'],
|
| 16 |
exposedHeaders: ['X-Custom-Header-Test'],
|
| 17 |
credentials: false,
|
|
@@ -27,9 +30,12 @@ app.use((req, res, next) => {
|
|
| 27 |
next();
|
| 28 |
});
|
| 29 |
|
| 30 |
-
app.
|
|
|
|
| 31 |
res.json({
|
| 32 |
-
message:
|
|
|
|
|
|
|
| 33 |
timestamp: new Date().toISOString(),
|
| 34 |
});
|
| 35 |
});
|
|
@@ -56,35 +62,35 @@ app.get('/', (req, res) => {
|
|
| 56 |
<body>
|
| 57 |
<div class="container">
|
| 58 |
<h1>Express.js 应用已部署</h1>
|
| 59 |
-
<p>请复制以下由浏览器动态生成的 <code>fetch</code>
|
| 60 |
<pre><code id="fetch-code"><!-- 代码将由 JS 动态填充于此 --></code></pre>
|
| 61 |
<p class="copy-notice">点击上面的代码块即可复制。</p>
|
| 62 |
</div>
|
| 63 |
|
| 64 |
<script>
|
| 65 |
-
// 在页面加载完成后执行
|
| 66 |
document.addEventListener('DOMContentLoaded', () => {
|
| 67 |
const codeElement = document.getElementById('fetch-code');
|
| 68 |
-
|
| 69 |
-
// 1. 由客户端 JS 直接、准确地获取 origin
|
| 70 |
const origin = window.location.origin;
|
| 71 |
|
| 72 |
-
//
|
| 73 |
-
const fetchCode = \`fetch('\${origin}/api'
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 74 |
.then(response => {
|
| 75 |
console.log('Status:', response.status);
|
| 76 |
-
console.log('Content-Length:', response.headers.get('Content-Length'));
|
| 77 |
console.log('Custom Header "X-Custom-Header-Test":', response.headers.get('X-Custom-Header-Test'));
|
| 78 |
return response.json();
|
| 79 |
})
|
| 80 |
.then(data => console.log('Data:', data))
|
| 81 |
.catch(error => console.error('Error:', error));\`;
|
| 82 |
|
| 83 |
-
// 3. 将生成的代码注入到 HTML 中
|
| 84 |
codeElement.textContent = fetchCode;
|
| 85 |
});
|
| 86 |
|
| 87 |
-
// 复制功能保持不变
|
| 88 |
document.querySelector('pre').addEventListener('click', function() {
|
| 89 |
const codeToCopy = document.getElementById('fetch-code').innerText;
|
| 90 |
navigator.clipboard.writeText(codeToCopy).then(() => {
|
|
@@ -99,6 +105,7 @@ app.get('/', (req, res) => {
|
|
| 99 |
`);
|
| 100 |
});
|
| 101 |
|
|
|
|
| 102 |
app.listen(PORT, () => {
|
| 103 |
-
console.log(`Server is running at http://localhost:${PORT}`)
|
| 104 |
});
|
|
|
|
| 4 |
const app = express();
|
| 5 |
const PORT = process.env.PORT || 7860;
|
| 6 |
|
| 7 |
+
// 解析 JSON body
|
| 8 |
+
app.use(express.json());
|
| 9 |
+
|
| 10 |
+
// 'trust proxy' 对于部署在反向代理后的应用仍是良好实践。
|
| 11 |
app.set('trust proxy', 1);
|
| 12 |
|
| 13 |
// --- CORS 配置 ---
|
| 14 |
+
// 允许任何方法和标准的请求头
|
| 15 |
const corsOptions = {
|
| 16 |
origin: '*',
|
| 17 |
+
methods: '*', // 允许所有 HTTP 方法
|
| 18 |
allowedHeaders: ['Content-Type', 'Authorization'],
|
| 19 |
exposedHeaders: ['X-Custom-Header-Test'],
|
| 20 |
credentials: false,
|
|
|
|
| 30 |
next();
|
| 31 |
});
|
| 32 |
|
| 33 |
+
// 使用 app.all() 捕获所有方法的 /api 请求
|
| 34 |
+
app.all('/api', (req, res) => {
|
| 35 |
res.json({
|
| 36 |
+
message: `API is working! Request received with method: ${req.method}.`,
|
| 37 |
+
methodUsed: req.method, // 在响应中明确指出收到的方法
|
| 38 |
+
bodyReceived: req.body, // 如果有请求体，也一并返回
|
| 39 |
timestamp: new Date().toISOString(),
|
| 40 |
});
|
| 41 |
});
|
|
|
|
| 62 |
<body>
|
| 63 |
<div class="container">
|
| 64 |
<h1>Express.js 应用已部署</h1>
|
| 65 |
+
<p>请复制以下由浏览器动态生成的 <code>fetch</code> POST 请求代码到开发者工具中进行测试：</p>
|
| 66 |
<pre><code id="fetch-code"><!-- 代码将由 JS 动态填充于此 --></code></pre>
|
| 67 |
<p class="copy-notice">点击上面的代码块即可复制。</p>
|
| 68 |
</div>
|
| 69 |
|
| 70 |
<script>
|
|
|
|
| 71 |
document.addEventListener('DOMContentLoaded', () => {
|
| 72 |
const codeElement = document.getElementById('fetch-code');
|
|
|
|
|
|
|
| 73 |
const origin = window.location.origin;
|
| 74 |
|
| 75 |
+
// 注意：这里的反斜杠是必需的，因为这段JS代码本身是位于一个父模板字符串中
|
| 76 |
+
const fetchCode = \`fetch('\${origin}/api', {
|
| 77 |
+
method: 'POST',
|
| 78 |
+
headers: {
|
| 79 |
+
'Content-Type': 'application/json'
|
| 80 |
+
},
|
| 81 |
+
body: JSON.stringify({ user: 'test-user', action: 'check-cors' })
|
| 82 |
+
})
|
| 83 |
.then(response => {
|
| 84 |
console.log('Status:', response.status);
|
|
|
|
| 85 |
console.log('Custom Header "X-Custom-Header-Test":', response.headers.get('X-Custom-Header-Test'));
|
| 86 |
return response.json();
|
| 87 |
})
|
| 88 |
.then(data => console.log('Data:', data))
|
| 89 |
.catch(error => console.error('Error:', error));\`;
|
| 90 |
|
|
|
|
| 91 |
codeElement.textContent = fetchCode;
|
| 92 |
});
|
| 93 |
|
|
|
|
| 94 |
document.querySelector('pre').addEventListener('click', function() {
|
| 95 |
const codeToCopy = document.getElementById('fetch-code').innerText;
|
| 96 |
navigator.clipboard.writeText(codeToCopy).then(() => {
|
|
|
|
| 105 |
`);
|
| 106 |
});
|
| 107 |
|
| 108 |
+
// 已修正：模板字符串中不再有任何不必要的转义反斜杠
|
| 109 |
app.listen(PORT, () => {
|
| 110 |
+
console.log(`Server is running at http://localhost:${PORT}`);
|
| 111 |
});
|