Cloudflare Workers 解决 Vue 项目跨域访问后端问题

可以使用 Cloudflare Workers 来解决跨域访问后端的问题。下面是一个示例代码:

additionEventlistener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  // 检查请求的路径是否为 '/api'
  if (request.url.endsWith('/api')) {
    // 构造请求头
    const headers = new Headers(request.headers)
    headers.set('Origin', 'https://example.com') // 设置允许跨域访问的域名

    // 构造请求，并发送到后端服务器
    const url = 'https://backend.example.com/api'
    const newRequest = new Request(url, {
      method: request.method,
      headers,
      body: request.body,
      redirect: 'follow'
    })
    const response = await fetch(newRequest)

    // 构造响应头
    const newHeaders = new Headers(response.headers)
    newHeaders.set('Access-Control-Allow-Origin', 'https://example.com') // 设置允许跨域访问的域名

    // 构造响应，并返回给前端
    return new Response(response.body, {
      status: response.status,
      statusText: response.statusText,
      headers: newHeaders
    })
  }

  // 如果不是 '/api' 路径的请求，则直接返回原始请求
  return fetch(request)
}

在上面的代码中，我们首先检查请求的路径是否为 '/api'。如果是，就构造一个新的请求并发送到后端服务器，然后将响应返回给前端。在这个过程中，我们需要设置允许跨域访问的域名，以确保前端可以正常访问后端。

如果请求的路径不是 '/api'，则直接返回原始请求。这样可以确保其他的请求不受影响。

需要注意的是，以上代码只是一个示例，实际应用中需要根据具体情况进行修改。