Angular+PHP后端CRUD接口CORS跨域OPTIONS预检400错误求助

Let's break down your problem and fix it step by step:

The Root Cause #

Your CORS issue happens because your PHP backend isn't handling the OPTIONS preflight request correctly. When the browser sends a POST request from a different origin, it first sends an OPTIONS request to check if the server allows cross-origin requests. Your current create.php script doesn't account for this OPTIONS request—since it has no POST data, it hits the final else block and returns a 400 Bad Request, which fails the preflight check and blocks the actual POST.

Additionally, there are two other issues that would cause problems even after fixing CORS:

1. Your Angular form isn't binding input values to the caregiver object, so you're sending empty data.
2. Your PHP script is trying to read data from $_POST, but Angular's HttpClient.post sends JSON in the request body by default, not form data.

Fix 1: Handle OPTIONS Preflight in PHP #

Add this at the very top of create.php to catch OPTIONS requests and return a valid 200 response immediately:

<?php
// Handle OPTIONS preflight request
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit;
}
// Rest of your existing code...

Fix 2: Read JSON Data Correctly in PHP #

Since Angular sends JSON, replace your data reading logic with this to parse the request body properly:

// Replace $_POST with this:
$data = json_decode(file_get_contents("php://input"));

// Also, note that you're wrapping the caregiver in a `data` object in Angular, so adjust your checks to:
if ( !empty($data->data->firstName) && !empty($data->data->lastName) && !empty($data->data->email) && !empty($data->data->password) ) {
  $caregiver->firstName = $data->data->firstName;
  $caregiver->lastName = $data->data->lastName;
  $caregiver->email = $data->data->email;
  $caregiver->password = $data->data->password;
  // ... rest of your existing assignment logic
}

Fix 3: Fix Angular Form Data Binding #

Your template inputs aren't linked to the caregiver object, so you're sending empty values. Update your template to use two-way binding with [(ngModel)]:

<ng-container>
  <form #f="ngForm" (submit)="createCaregiver()">
    <div class="input-group">
      <label for="firstName" class="appear">Voornaam</label>
      <input type="text" placeholder="Voornaam" [(ngModel)]="caregiver.firstName" name="firstName" required />
    </div>
    <div class="input-group">
      <label for="lastName" class="appear">Achternaam</label>
      <input type="text" placeholder="Achternaam" [(ngModel)]="caregiver.lastName" name="lastName" required />
    </div>
    <div class="input-group">
      <label for="email" class="appear">E-mailadres</label>
      <input type="email" placeholder="E-mailadres" [(ngModel)]="caregiver.email" name="email" required />
    </div>
    <div class="input-group">
      <label for="password" class="appear">Wachtwoord</label>
      <input type="password" placeholder="Wachtwoord" [(ngModel)]="caregiver.password" name="password" required />
    </div>
    <div class="login-height"></div>
    <div class="actions">
      <button class="btn btn-blue btn-main" type="submit" [disabled]="!f.valid">
        <span>Registreer</span>
        <img src="assets/img/icons/arrow-right.svg" alt="arrow-right" class="icon">
      </button>
      <p class="smaller-link"> Heb je al een account? Log <a class="small-link" href="/">hier</a> in. </p>
    </div>
  </form>
</ng-container>

Make sure you've imported FormsModule in your Angular module (e.g., AppModule) to use ngModel.

Fix 4: Optimize .htaccess for CORS #

Update your .htaccess to ensure OPTIONS requests aren't rewritten to .php files:

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

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^([^\.]+)$ $1.php [NC,L]

Header always set Access-Control-Allow-Origin *
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding"
Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"

Why Postman Works #

Postman doesn't send an OPTIONS preflight request for cross-origin requests (it skips the browser's CORS checks), so it can send the POST directly even if your backend doesn't handle OPTIONS. That's why it worked while Chrome didn't.

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