Cloudflare Pages 部署 Vue 项目跨域交互配置指南

使用 Cloudflare Pages 部署 Vue 项目，要实现和后端跨域交互，可以在 Cloudflare Page 的配置文件中添加以下内容实现跨域：

routes:
  - pattern: '/api'
    headers:
      Access-Control-Allow-Origin: '*'
      Access-Control-Allow-Methods: 'GET, POST, PUT, DELETE, OPTIONS'
      Access-Control-Allow-Headers: 'Content-Type, Authorization, X-Requested-With'

其中，/api 是你的后端 API 接口路径，Access-Control-Allow-Origin、Access-Control-Allow-Methods 和 Access-Control-Allow-Headers 分别是跨域请求允许的域名、请求方法和请求头。你需要将它们设置为你的后端 API 所需的值。

如果你的后端需要验证请求头中的 Authorization 字段，你还需要在 Cloudflare Page 的配置文件中添加以下内容：

headers:
  Authorization: Bearer <your-token>

其中，<your-token> 是你的后端验证所需的 Token。

最后，在你的 Vue 项目中，你需要使用 axios 或其他 HTTP 请求库向后端 API 发送请求，同时设置好请求头，例如：

import axios from 'axios'

axios.defaults.baseURL = 'https://example.com/api'
axios.defaults.headers.common['Authorization'] = 'Bearer <your-token>'

其中，https://example.com/api 是你的后端 API 地址，<your-token> 是你的 Token。你需要将它们设置为你的后端 API 所需的值。