React开发环境调用API正常，AWS Amplify部署后连接失败求助

Hey there! I’ve run into exactly this kind of issue before, so let’s break down the most likely fixes step by step. Since your app works locally but breaks after deploying to Amplify, the problem almost always ties to CORS configuration, Amplify’s proxy setup, or EC2 security group restrictions.

1. First, Fix CORS on Your EC2 PHP API #

Local dev servers (like Create React App’s built-in server) automatically handle proxying to bypass CORS rules, but once deployed to Amplify, your frontend makes direct requests to the EC2 API. You need to explicitly allow your Amplify domain in your API’s CORS headers.

Option 1: Add CORS Headers Directly in PHP #

At the very top of your PHP API files (before any output), add these headers to allow your Amplify app to connect:

<?php
// Replace with your actual Amplify app domain
header("Access-Control-Allow-Origin: https://your-amplify-app-id.amplifyapp.com");
// Allow the HTTP methods your API uses
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
// Allow headers your frontend sends (like Content-Type for form data)
header("Access-Control-Allow-Headers: Content-Type, Authorization");

// Handle preflight OPTIONS requests (required for CORS)
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit();
}
// Rest of your API logic goes here...
?>

For testing, you can use * instead of the Amplify URL to allow all domains, but make sure to lock it down to your actual domain in production.

Option 2: Configure CORS in Apache/Nginx #

If your EC2 instance uses a web server like Apache or Nginx, you can set CORS globally instead of per PHP file:

Apache (edit .htaccess):

Header set Access-Control-Allow-Origin "https://your-amplify-app-id.amplifyapp.com"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"

# Handle OPTIONS requests
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

Nginx (add to your server block):

add_header Access-Control-Allow-Origin "https://your-amplify-app-id.amplifyapp.com";
add_header Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS";
add_header Access-Control-Allow-Headers "Content-Type, Authorization";

if ($request_method = OPTIONS) {
    return 200;
}

2. Set Up Amplify Rewrite/Redirect Rules (Proxy Requests) #

If you don’t want to expose your EC2 API’s public URL directly, or want to avoid CORS by proxying through Amplify, set up rewrite rules:

1. Go to your Amplify app dashboard → App settings → Rewrites and redirects
2. Click Edit → Add rule
3. Use these settings:
   • Source address: /api/<*> (match the path prefix your frontend uses for API calls)
   • Target address: https://your-ec2-api-public-ip/<*> (replace with your EC2 API’s full URL)
   • Type: 200 (Rewrite)
4. Save the rule and redeploy your app.

Then update your frontend API calls to use /api/ instead of the full EC2 URL—Amplify will proxy the request, bypassing CORS issues entirely.

3. Verify EC2 Security Group Settings #

Make sure your EC2 instance allows incoming traffic from the internet (or Amplify’s IP ranges):

• Go to your EC2 dashboard → Instances → Select your API instance → Security tab → Click the security group ID
• Add an inbound rule:
  • Type: HTTP (or HTTPS if you use SSL)
  • Source: 0.0.0.0/0 (for public access; you can restrict to Amplify’s IPs later for better security)
• Save the rule.

4. Test the API Directly #

Before debugging the frontend, confirm your EC2 API is reachable and returns correct headers using curl or Postman:

curl -I https://your-ec2-api-url/your-endpoint

Check if the Access-Control-Allow-Origin header is present and matches your Amplify domain.

Final Steps #

1. Deploy your updated PHP API (if you modified CORS headers)
2. Redeploy your React app to Amplify
3. Test in incognito mode (to avoid browser cache issues)

If you still hit problems, check your browser’s Network tab in dev tools—failed requests will show status codes (like 403 for CORS or 500 for server errors) that will point you to the next fix.

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