【Node.js】WinterCG，从 Web 可互操 runtime 到 URL 标准的演进之路

1
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
2
│                                              href                                              │
3
├──────────┬──┬─────────────────────┬────────────────────────┬───────────────────────────┬───────┤
4
│ protocol │  │        auth         │          host          │           path            │ hash  │
5
│          │  │                     ├─────────────────┬──────┼──────────┬────────────────┤       │
6
│          │  │                     │    hostname     │ port │ pathname │     search     │       │
7
│          │  │                     │                 │      │          ├─┬──────────────┤       │
8
│          │  │                     │                 │      │          │ │    query     │       │
9
"  https:   //    user   :   pass   @ sub.example.com : 8080   /p/a/t/h  ?  query=string   #hash "
10
│          │  │          │          │    hostname     │ port │          │                │       │
11
│          │  │          │          ├─────────────────┴──────┤          │                │       │
12
│ protocol │  │ username │ password │          host          │          │                │       │
13
├──────────┴──┼──────────┴──────────┼────────────────────────┤          │                │       │
14
│   origin    │                     │         origin         │ pathname │     search     │ hash  │
15
├─────────────┴─────────────────────┴────────────────────────┴──────────┴────────────────┴───────┤
16
│                                              href                                              │
17
└────────────────────────────────────────────────────────────────────────────────────────────────┘

1
<template>
2
  <div class="form-container">
3
    <h2>用户注册</h2>
4
    <input
5
      v-model="form.name"
6
      placeholder="姓名"
7
      class="input"
8
    />
9
    <input
10
      v-model="form.email"
11
      type="email"
12
      placeholder="邮箱"
13
      class="input"
14
    />
15
    <button
16
      @click="submitForm"
17
      class="btn"
18
    >
19
      提交
20
    </button>
21
    <div class="response">{{ responseMsg }}</div>
22
  </div>
23
</template>
24

25
<script setup>
26
import { ref } from 'vue'
27

28
const form = ref({ name: '', email: '' })
29
const responseMsg = ref('')
30

31
async function submitForm() {
32
  try {
33
    // 调用跨runtime的后端接口（用fetch，遵循Winter标准）
34
    const res = await fetch('https://api.example.com/register', {
35
      method: 'POST',
36
      body: JSON.stringify(form.value),
37
      headers: { 'Content-Type': 'application/json' },
38
    })
39
    const data = await res.json()
40
    responseMsg.value = data.message
41
  } catch (err) {
42
    responseMsg.value = '提交失败：' + err.message
43
  }
44
}
45
</script>

1
// 跨runtime的核心逻辑
2
async function handleRegister(request) {
3
  const formData = await request.json()
4

5
  // 验证邮箱格式（用WHATWG URL解析邮箱域名）
6
  const emailUrl = new URL(`mailto:${formData.email}`)
7
  if (!emailUrl.hostname.endsWith('.com')) {
8
    return new Response(JSON.stringify({ message: '请使用.com邮箱' }), {
9
      status: 400,
10
    })
11
  }
12

13
  // 保存到数据库（仅Node.js后端执行）
14
  if (globalThis.process?.versions?.node) {
15
    await saveToDatabase(formData)
16
  }
17

18
  return new Response(JSON.stringify({ message: '注册成功' }), { status: 200 })
19
}
20

21
// Node.js入口
22
import { createServer } from 'node:http'
23
createServer(async (req, res) => {
24
  const request = new Request(`http://${req.headers.host}${req.url}`, {
25
    method: req.method,
26
    headers: req.headers,
27
    body: req,
28
  })
29
  const response = await handleRegister(request)
30
  res.writeHead(response.status, response.headers)
31
  res.end(await response.text())
32
}).listen(3000)
33

34
// Cloudflare Workers入口
35
addEventListener('fetch', (event) => {
36
  event.respondWith(handleRegister(event.request))
37
})