Cloudflare Pages 部署 Vue 项目与后端交互配置指南

要实现和后端交互，需要在 Vue 项目中设置请求的接口地址，可以使用 axios 等库来发送请求。接口地址应该是后端部署在云服务器上的地址。

另外，需要在 Cloudflare 中设置跨域请求的规则，允许来自 Vue 项目的请求访问后端接口。可以在 Cloudflare 的 Firewall 中设置。

具体步骤如下：

1. 在 Vue 项目中设置请求的接口地址，例如：

axios.get('/api/user')
  .then(response => {
    console.log(response.data)
  })

这里假设后端接口的地址为'/api'。

2. 在 Cloudflare 中设置跨域请求的规则。在 Cloudflare 控制台中选择 Firewall -> Firewall Rules，创建一个新的规则，设置规则如下：

• Action：Allow
• Filter：Expression，设置为'http.request.uri.path contains "/api"'，表示当请求的路径包含'/api'时允许访问。
• Bypass：Off
• Log：Off

保存规则后，Cloudflare 会自动应用到所有访问该域名的请求中。

这样就可以在 Cloudflare Page 部署的 Vue 项目中与后端进行交互了。