Cloudflare Workers CORS 跨域问题排查与解决

你现在看到的是两个完全不同的问题叠加在一起。

真正导致表单提交失败的是:CORS
CSP 报错是浏览器插件造成的”干扰信息”,可以忽略

先给结论

表单失败的根因是:Worker 没有正确处理 CORS 预检请求(OPTIONS)。只要把 CORS + OPTIONS 补齐,fetch failed 会立刻消失。

日志逐条解释

这个 CSP 报错【不是你的问题】

Executing inline script violates the following Content Security Policy...
chrome-extension://a05f635f...

这是浏览器扩展(插件)注入脚本被 CSP 拦截。

来自 chrome-extension://...
和你的 Astro / Worker / 表单无关
不影响接口请求

可以完全忽略。

这个才是致命错误【真正原因】

Access to fetch at 'https://xxx.workers.dev/api/contact'
from origin 'http://localhost:4321'
has been blocked by CORS policy:

Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header

关键信息:

浏览器发起了 OPTIONS 预检请求
Worker 没有返回 CORS 头
浏览器直接拦截 → ERR_FAILED

为什么会有 OPTIONS 预检?

因为你满足了以下任意条件(你全中了):

Content-Type: application/json
POST 请求
跨域(localhost → workers.dev)

浏览器 一定会先发 OPTIONS。

你现在的 Worker 一定缺了这段逻辑

1
if (request.method === 'OPTIONS') {
2
  // 你现在没有正确处理
3
}

直接给你一份生产可用的 Worker 模板

你可以整体替换当前 Worker 代码。

1
const corsHeaders = {
2
  'Access-Control-Allow-Origin': 'http://localhost:4321', // 本地开发
3
  // 生产环境可以换成你的域名
4
  // 'https://yourdomain.com'
5

6
  'Access-Control-Allow-Methods': 'POST, OPTIONS',
7
  'Access-Control-Allow-Headers': 'Content-Type',
8
}
9

10
export default {
11
  async fetch(request, env) {
12
    // 1️⃣ 处理 CORS 预检
13
    if (request.method === 'OPTIONS') {
14
      return new Response(null, {
15
        status: 204,
16
        headers: corsHeaders,
17
      })
18
    }
19

20
    // 2️⃣ 只允许 POST
21
    if (request.method !== 'POST') {
22
      return new Response('Method Not Allowed', {
23
        status: 405,
24
        headers: corsHeaders,
25
      })
26
    }
27

28
    // 3️⃣ 解析数据
29
    const { name, email, phone, message } = await request.json()
30

31
    if (!name || !email || !message) {
32
      return new Response(
33
        JSON.stringify({ error: 'Missing fields' }),
34
        {
35
          status: 400,
36
          headers: {
37
            ...corsHeaders,
38
            'Content-Type': 'application/json',
39
          },
40
        }
41
      )
42
    }
43

44
    // 4️⃣ 调用 Resend
45
    const res = await fetch('https://api.resend.com/emails', {
46
      method: 'POST',
47
      headers: {
48
        'Authorization': `Bearer ${env.RESEND_API_KEY}`,
49
        'Content-Type': 'application/json',
50
      },
51
      body: JSON.stringify({
52
        from: 'Website Contact <no-reply@YOUR_VERIFIED_DOMAIN.com>',
53
        to: ['[email protected]'],
54
        subject: 'New Contact Message',
55
        html: `
56
          <p><b>Name:</b> ${name}</p>
57
          <p><b>Email:</b> ${email}</p>
58
          <p><b>Phone:</b> ${phone || '-'}</p>
59
          <p><b>Message:</b> ${message}</p>
60
        `,
61
      }),
62
    })
63

64
    if (!res.ok) {
65
      const err = await res.text()
66
      return new Response(err, {
67
        status: 500,
68
        headers: corsHeaders,
69
      })
70
    }
71

72
    // 5️⃣ 成功返回
73
    return new Response(
74
      JSON.stringify({ success: true }),
75
      {
76
        headers: {
77
          ...corsHeaders,
78
          'Content-Type': 'application/json',
79
        },
80
      }
81
    )
82
  },
83
}

Astro 前端这边你不用改(基本是对的)

1
await fetch('https://icy-truth-83e1.bennyxqg.workers.dev/api/contact', {
2
  method: 'POST',
3
  headers: {
4
    'Content-Type': 'application/json',
5
  },
6
  body: JSON.stringify(formData),
7
})

没问题,CORS 是后端的责任。

常见优化(等你跑通后再做)

允许多个来源(开发 + 生产)

1
const origin = request.headers.get('Origin')
2
const allowed = ['http://localhost:4321', 'https://yourdomain.com']
3

4
if (allowed.includes(origin)) {
5
  corsHeaders['Access-Control-Allow-Origin'] = origin
6
}

临时调试(不推荐生产)

1
'Access-Control-Allow-Origin': '*'

你现在的状态总结

项目	状态
Worker 部署	✅
API 路由	✅
Resend 调用	✅
CORS	❌ → 已定位
CSP 插件报错	⚠️ 可忽略

你现在已经是”只差最后一道门”。