cloudflare page部署的vue项目怎么解决跨域访问后端

可以使用 Cloudflare Workers 来解决跨域访问后端的问题。

Cloudflare Workers 是一种基于 JavaScript 的无服务器平台，可以在 Cloudflare 的边缘节点上运行代码，可以实现一些高级的边缘计算功能。使用 Cloudflare Workers 可以在边缘节点上执行一些中间件逻辑，比如处理跨域请求。

以下是一个使用 Cloudflare Workers 处理跨域请求的示例代码：

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

async function handleRequest(request) {
  const url = new URL(request.url)
  const apiURL = 'https://backend.example.com/api'
  const headers = { 'Access-Control-Allow-Origin': '*' }

  if (url.pathname.startsWith('/api/')) {
    // 构造向后端发送请求的 URL
    const apiReqURL = apiURL + url.pathname.substring(4) + url.search

    // 发送请求到后端
    const apiRes = await fetch(apiReqURL, {
      method: request.method,
      headers: request.headers,
      body: request.method != 'GET' ? request.body : null
    })

    // 构造返回给前端的响应
    const apiResHeaders = new Headers(apiRes.headers)
    apiResHeaders.set('Access-Control-Allow-Origin', '*')
    const apiResBody = await apiRes.text()
    const apiResStatus = apiRes.status

    return new Response(apiResBody, {
      headers: apiResHeaders,
      status: apiResStatus
    })
  } else {
    // 如果不是 API 请求，直接返回 index.html
    const indexHTML = await fetch('https://example.com/index.html')
    return new Response(indexHTML.body, {
      headers: headers,
      status: 200
    })
  }
}

该代码会将前端页面请求的 API 请求转发到后端，并添加 Access-Control-Allow-Origin 头部以实现跨域访问。在 Cloudflare Workers 控制台中，可以将该代码部署为一个 Worker，然后将 Cloudflare Page 配置为使用该 Worker 处理跨域请求