跳到主要内容

跨域校验

跨域校验是一种安全机制，用于 控制浏览器发起的跨域请求。当开启跨域校验后，HTTP 访问服务会在网关层面验证请求来源（Origin），确保只有安全的域名能够访问您的云资源。

工作原理​

  • 开启跨域校验：HTTP 访问服务会在网关层自动处理跨域请求

    • 验证请求的来源域名（Origin）是否在 Web 安全域名白名单内
    • 自动添加相应的跨域响应头（如 Access-Control-Allow-Origin）
    • 拦截不在白名单内的跨域请求

  • 关闭跨域校验：跨域请求将直接转发到后端资源

    • 网关不进行跨域校验和响应头处理
    • 需要后端服务（云函数/云托管）自行处理跨域逻辑
    • 适合需要灵活控制跨域策略的场景

使用场景​

场景 1：前端应用调用云资源（推荐开启）​

如果您的前端应用（Web 网站、单页应用等）需要直接调用云函数或云托管服务，建议开启跨域校验：

// 前端代码示例 - 开启跨域校验后可直接调用
fetch('https://your-env.service.tcloudbase.com/api/getData', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => response.json())
  .then(data => console.log('数据获取成功:', data))
  .catch(error => console.error('请求失败:', error));

优势：

  • 网关自动处理跨域，后端代码无需关注跨域逻辑
  • 统一的安全域名管理，便于维护
  • 减少后端代码复杂度

场景 2：后端自定义跨域策略（关闭跨域校验）​

如果您需要在后端实现更灵活的跨域控制策略，可以关闭跨域校验：

// 云函数代码示例 - 关闭跨域校验后需自行处理
exports.main = async (event, context) => {
  // 获取请求来源
  const origin = event.headers.origin || event.headers.Origin;
  
  // 自定义跨域逻辑
  const allowedOrigins = ['https://example.com', 'https://app.example.com'];
  const corsHeaders = {};
  
  if (allowedOrigins.includes(origin)) {
    corsHeaders['Access-Control-Allow-Origin'] = origin;
    corsHeaders['Access-Control-Allow-Methods'] = 'GET, POST, OPTIONS';
    corsHeaders['Access-Control-Allow-Headers'] = 'Content-Type, Authorization';
    corsHeaders['Access-Control-Allow-Credentials'] = 'true';
  }
  
  // 处理 OPTIONS 预检请求
  if (event.httpMethod === 'OPTIONS') {
    return {
      statusCode: 204,
      headers: corsHeaders,
      body: ''
    };
  }
  
  // 业务逻辑处理
  const result = {
    message: '请求成功',
    data: { /* 业务数据 */ }
  };
  
  return {
    statusCode: 200,
    headers: {
      ...corsHeaders,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(result)
  };
};

适用场景：

  • 需要针对不同接口设置不同的跨域策略
  • 需要动态判断是否允许跨域
  • 需要设置复杂的跨域响应头（如 Credentials、Expose-Headers 等）

常见问题​

跨域请求失败怎么办？​

如果遇到跨域错误（如 CORS error），请按以下步骤排查：

  1. 检查跨域校验开关状态

    • 如果开启了跨域校验，确认请求来源域名是否已添加到 Web 安全域名 白名单
    • 如果关闭了跨域校验，确认后端服务是否正确处理了跨域请求

  2. 验证域名配置

    • 域名需完全匹配（包括协议、端口）
    • 通配符域名确保格式正确（如 *.example.com）

  3. 检查浏览器控制台

    • 查看具体的跨域错误信息
    • 确认 OPTIONS 预检请求是否成功

跨域校验与身份认证的关系​

跨域校验和 身份认证 是两个独立的安全机制：

  • 跨域校验：控制哪些域名可以发起请求
  • 身份认证：控制哪些用户可以访问资源

两者可以同时启用，提供双重安全保护。