Skip to main content

CORS Validation

CORS validation is a security mechanism used to control cross-origin requests initiated by browsers. When CORS validation is enabled, the HTTP access service will validate the request origin at the gateway level to ensure that only safe domains can access your cloud resources.

How It Works​

  • CORS Validation Enabled: The HTTP access service automatically handles cross-origin requests at the gateway level

    • Validates whether the request's origin domain is in the web security domain whitelist
    • Automatically adds corresponding CORS response headers (such as Access-Control-Allow-Origin)
    • Blocks cross-origin requests not in the whitelist

  • CORS Validation Disabled: Cross-origin requests are directly forwarded to backend resources

    • Gateway does not perform CORS validation and response header processing
    • Backend services (cloud functions/cloud run) need to handle CORS logic themselves
    • Suitable for scenarios requiring flexible control of CORS policies

Use Cases​

If your frontend application (website, single-page application, etc.) needs to directly call cloud functions or cloud run services, it's recommended to enable CORS validation:

// Frontend code example - Can directly call after enabling CORS validation
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 fetched successfully:', data))
  .catch(error => console.error('Request failed:', error));

Advantages:

  • Gateway automatically handles CORS, backend code doesn't need to concern with CORS logic
  • Unified security domain management, easy to maintain
  • Reduces backend code complexity

Scenario 2: Backend Custom CORS Policy (Disable CORS Validation)​

If you need to implement more flexible CORS control policies in the backend, you can disable CORS validation:

// Cloud function code example - Need to handle CORS yourself after disabling CORS validation
exports.main = async (event, context) => {
  // Get request origin
  const origin = event.headers.origin || event.headers.Origin;
  
  // Custom CORS logic
  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';
  }
  
  // Handle OPTIONS preflight request
  if (event.httpMethod === 'OPTIONS') {
    return {
      statusCode: 204,
      headers: corsHeaders,
      body: ''
    };
  }
  
  // Business logic processing
  const result = {
    message: 'Request successful',
    data: { /* business data */ }
  };
  
  return {
    statusCode: 200,
    headers: {
      ...corsHeaders,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(result)
  };
};

Applicable Scenarios:

  • Need to set different CORS policies for different interfaces
  • Need to dynamically determine whether to allow cross-origin
  • Need to set complex CORS response headers (such as Credentials, Expose-Headers, etc.)

Common Issues​

What to Do When CORS Request Fails?​

If you encounter CORS errors, please troubleshoot following these steps:

  1. Check CORS Validation Switch Status

    • If CORS validation is enabled, confirm whether the request origin domain has been added to the Web Security Domain whitelist
    • If CORS validation is disabled, confirm whether the backend service has correctly handled the CORS request

  2. Verify Domain Configuration

    • Domain needs to match completely (including protocol, port)
    • Wildcard domains ensure correct format (e.g., *.example.com)

  3. Check Browser Console

    • View specific CORS error messages
    • Confirm whether OPTIONS preflight request is successful

Relationship Between CORS Validation and Authentication​

CORS validation and Authentication are two independent security mechanisms:

  • CORS Validation: Controls which domains can initiate requests
  • Authentication: Controls which users can access resources

Both can be enabled simultaneously to provide dual security protection.