CORS 策略已阻止从源“http://localhost:8000”访问“http://localhost/api”处的 XMLHttpRequest

Question

我正在尝试在后端使用简单的 CRUD API 设置 Angular 应用程序。我的 CORS 政策存在一些问题，我还没有找到解决我的错误的正确解决方案。我正在尝试通过角度形式创建用户（护理人员）。

我认为我的 php api 中的标头不止必要。我已将它们放在一个 .htaccess 文件中：

RewriteEngine On
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"

当我尝试请求时，我还可以在我的 Chrome 控制台中看到它们：

如您所见，我收到状态代码 400：错误请求，但它在我的 OPTIONS 请求中，所以在我发布表单数据之前。

然后这是我在我的 chrome 控制台中遇到的错误： 所以我认为这是问题所在：

访问 XMLHttpRequest 在 'http://localhost/api_pillassist/caregiver/create.php' from origin >'http://localhost:8000' 已被 CORS 策略阻止：对 >preflight 请求的响应未通过访问控制检查：它没有 HTTP ok >状态。

我也已经下载了启用“允许控制允许来源：*”的 chrome 扩展，但即使这样也不起作用。

我将在下面提供一些我的代码，尽管我不确定问题出在哪里。我还尝试在 Postman 中发送带有表单数据的 POST 请求，这很有效，所以我不知道这是否有用，但无论如何我都会包含它：

这是我在 Angular 应用中使用的组件模板：

<ng-container>
  <form #f="ngForm" (submit)="createCaregiver()">
    <div class="input-group">
      <label for="firstName" class="appear">Voornaam</label>
      <input type="text" placeholder="Voornaam" #firstName name="firstName" />
    </div>

    <div class="input-group">
      <label for="lastName" class="appear">Achternaam</label>
      <input type="text" placeholder="Achternaam" #lastName name="lastName" />
    </div>

    <div class="input-group">
      <label for="email" class="appear">E-mailadres</label>
      <input type="text" placeholder="E-mailadres" #email name="email" />
    </div>

    <div class="input-group">
      <label for="password" class="appear">Wachtwoord</label>
      <input type="password" placeholder="Wachtwoord" #password name="password" />
    </div>

    <div class="login-height"></div>

    <div class="actions">
      <button class="btn btn-blue btn-main" type="submit">
        <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>

这是它链接到的“createCaregiver()”函数：

export class RegisterComponent implements OnInit {
  caregiver = new Caregiver('', '', '', '');
  error: string;

  constructor(private caregiverService: CaregiverService) {}

  ngOnInit() {}

  createCaregiver() {
    this.caregiverService.create(this.caregiver).subscribe(
      (res: Caregiver[]) => {
        console.log(res);
      },
      err => ((this.error = err), console.log(err))
    );
  }
}

这是 caregiverService 文件：

export class CaregiverService {
  private baseUrl = 'http://localhost/api_pillassist/caregiver';
  private caregivers: Caregiver[];

  constructor(private http: HttpClient) {}

  create(caregiver: Caregiver): Observable<Caregiver[]> {
    return this.http
      .post(`${this.baseUrl}/create.php`, { data: caregiver })
      .pipe(
        map(res => {
          this.caregivers.push(res['data']);
          return this.caregivers;
        }),
        catchError(this.handleError)
      );
  }

这是在我的 api 中我在 create.php 文件中的内容：

<?php

include_once '../config/database.php';
include_once '../objects/caregiver.php';

$database = new Database();
$db = $database->getConnection();

$caregiver = new Caregiver($db);

$data = $_POST;
$data = json_encode($data);
$data = json_decode($data);

if (
    !empty($data->firstName) &&
    !empty($data->lastName) &&
    !empty($data->email) &&
    !empty($data->password)
) {
    $caregiver->firstName = $data->firstName;
    $caregiver->lastName = $data->lastName;
    $caregiver->email = $data->email;
    $caregiver->password = $data->password;
    $caregiver->created = date('Y-m-d H:i:s');

    if ($caregiver->create()) {

        http_response_code(201);

        echo json_encode(array("message" => "Profile was created."));
    } else {

        http_response_code(503);

        echo json_encode(array("message" => "Unable to create profile."));
    }
} else {

    http_response_code(400);

    echo json_encode(array("message" => "Unable to create profile. Data is incomplete."));
}

我会非常感谢任何可以帮助我的人。

Answer 1

预检 (OPTIONS) 请求应返回 HTTP OK（也称为代码 200）。

您可以在 create.php 中测试请求方法，当它是“OPTIONS”时返回 200，而不是现在默认情况下在代码的错误分支上发生的 400（错误请求）。