如何通过单CloudFront（带SSL）对接S3与EC2源？API报错求助

Hey there! I’ve tackled this exact CloudFront setup scenario before, so let’s walk through the most likely fixes for your API access issue—since your React app on S3 is working, we know the base CloudFront and DNS setup is partially correct, so we can focus on the API-specific configurations.

The biggest gotcha here is making sure CloudFront routes API requests to your EC2 instance instead of S3. Here’s how to verify:

• Go to your CloudFront distribution > Behaviors tab
• You should have two behaviors:
  • One for /* (root path) pointing to your S3 origin (this is working already)
  • A higher-priority behavior for /api/* (or whatever your API path prefix is) pointing to your EC2 origin

  Note: CloudFront processes behaviors in order from top to bottom, so the /api/* rule must come before the /* rule—otherwise all requests (including API calls) will hit S3, causing 404s.

If routing is correct, next confirm EC2 is reachable from CloudFront:

• Security Group Rules: Your EC2’s security group must allow inbound traffic on your API port (e.g., 8080) from CloudFront’s IP ranges. Instead of listing individual IPs, use the AWS-managed prefix list com.amazonaws.global.cloudfront.origin-facing to cover all CloudFront edge servers.
• EC2 API Availability: Test your API directly using EC2’s public IP/DNS (e.g., http://your-ec2-ip:8080/api/endpoint) with Postman or curl. If this fails, the issue is with your EC2 API itself, not CloudFront.
• Origin Protocol Policy: If your EC2 API uses HTTP, set CloudFront’s origin protocol policy to HTTP only. If using HTTPS, ensure EC2 has a valid SSL certificate (self-signed certs will require enabling “Allow invalid certificates” in CloudFront’s origin settings—not recommended for production).

Since your React app is making cross-origin requests to the API, CORS is almost certainly involved:

• EC2 API CORS Setup: In your Java API (e.g., Spring Boot), configure CORS to allow your CloudFront domain (e.g., https://yourdomain.com) as an allowed origin. Don’t forget to enable credentials if your Cognito auth uses cookies or auth headers:

  // Example Spring Boot CORS config
  @Bean
  public CorsFilter corsFilter() {
      UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
      CorsConfiguration config = new CorsConfiguration();
      config.setAllowCredentials(true);
      config.addAllowedOrigin("https://yourdomain.com");
      config.addAllowedHeader("*");
      config.addAllowedMethod("*");
      source.registerCorsConfiguration("/api/**", config);
      return new CorsFilter(source);
  }
  

• CloudFront Origin Header Forwarding: CloudFront needs to pass the Origin header from the browser to your EC2 API, otherwise your API’s CORS rules won’t trigger. In your /api/* behavior:
  • Go to Cache Key and Origin Requests
  • Select Cache policy and origin request policy
  • Choose a custom origin request policy that includes the Origin header (or use the managed Managed-CORS-S3Origin policy—yes, it works for EC2 too)

Since your React app uses Cognito, your API requests are likely carrying auth tokens (e.g., Authorization: Bearer <token>). Make sure CloudFront forwards this header to EC2:

• In your /api/* behavior’s origin request policy, add the Authorization header to the list of forwarded headers.
• Verify that your EC2 API is correctly validating the Cognito token (check that you’re using the right user pool ID, client ID, and token validation logic in your Java code).

API endpoints are dynamic—don’t let CloudFront cache their responses!

• For your /api/* behavior, set the cache policy to Managed-CachingDisabled (or create a custom policy with TTL set to 0). This ensures every API request goes directly to EC2 instead of hitting a stale cache.

Double-check your SSL setup since you’re using a GoDaddy certificate:

• Ensure you’ve imported your GoDaddy SSL certificate into AWS Certificate Manager (ACM) in the us-east-1 region (CloudFront requires certificates in this region regardless of your EC2/S3 region).
• Confirm your CloudFront distribution is using this certificate for the viewer protocol policy (set to Redirect HTTP to HTTPS to force all traffic over SSL).

• Use your browser’s DevTools > Network tab to inspect API requests: Check the status code (403 = CORS/security, 502 = EC2 unreachable, 404 = wrong path), response headers, and request headers.
• Enable CloudFront real-time logging to CloudWatch: This will show you exactly what headers are being forwarded to EC2, what the origin response code is, and where the request is failing.

内容的提问来源于stack exchange，提问作者Sachin Vairagi