使用 Cloudflare Pages 部署 Vue 项目并实现跨域交互

可以通过在 Cloudflare Workers 中添加跨域代理来实现与后端的跨域交互。

以下是一些基本步骤：

在 Cloudflare 控制台中创建一个 Worker。
在 Worker 代码中，添加以下代码来创建一个代理请求：

async function handleRequest(request) {
  const url = new URL(request.url)
  url.hostname = 'your-backend.com' // 替换为你的后端域名
  url.protocol = 'https' // 如果需要使用 HTTPS
  const modifiedRequest = new Request(url, request)
  return fetch(modifiedRequest)
}

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

在 Vue 项目中，将 API 请求的基础 URL 设置为 Worker 的 URL，例如：

const apiBaseUrl = 'https://your-worker-subdomain.your-account.workers.dev'

通过 Worker 代理来发送 API 请求，例如：

fetch(apiBaseUrl + '/api/data')
  .then(response => response.json())
  .then(data => console.log(data))

这样，Vue 项目就可以与后端进行跨域交互了。注意，这种方式可能会影响 API 请求的性能，因为请求会经过一个额外的中间层。