Блог

Я пытаюсь подключить угловую форму к файлу phpmail. Нет никаких проблем, когда файлы angular компилируются и загружаются в виде веб-приложения вместе с файлом php. Но если они где-то еще, я получаю следующую ошибку:

 Access to XMLHttpRequest at 'https://www.example.com/sendEmail.php' from origin 'http://localhost:8100' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
 

Посмотрев это довольно часто, все говорят, чтобы разрешить доступ-Контроль-Разрешить-происхождение, что я и сделал. Но это все равно говорит о том же самом.

Вот php — код:

 <?php
switch ( $_SERVER[ 'REQUEST_METHOD' ] ) {
  case ( "OPTIONS" ): 
    header( "Access-Control-Allow-Origin: *" );
    header( "Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS" );
    header( "Access-Control-Allow-Headers: AccountKey, x-requested-with, Content-Type, origin, authorization, accept, client-security-token, host, date, cookie, cookie2" );
    header( "Access-Control-Allow-Credentials: true" );
    header( "Content-Type: application/json");
    
    exit;
  case ( "POST" ): 

    $json = file_get_contents( 'php://input' );

    $params = json_decode( $json, TRUE );

    // Do all the things necessary here to send the email

    break;
  default: 
    header( "Allow: POST", true, 405 );
    exit;
}
?>
 

Я явно что-то упускаю, но понятия не имею, что именно. Нужно ли мне также что-то добавлять в угловой файл? Я предположил, что нет, так как ошибка консоли говорит о том, что ее нет в запрошенном ресурсе. Но это так, не так ли?

Редактировать:

Как и было запрошено, здесь приведена (сокращенная) версия углового кода для вызова php-файла в первую очередь.

 ngOnInit() {
    this.num1 = this.getRandomArbitrary(2, 10);
    this.num2 = this.getRandomArbitrary(2, 10);
    this.solution = this.num1   this.num2;


    this.endpoint = "https://www.example.com/sendEmail.php";

    
    this.contactUs = this.formBuilder.group({
      firstName: [''],
      surname: [''],
      companyName: [''],
      jobTitle: [''],
      email: ['', Validators.required],
      telephone: [''],
      enquiry: [''],
      userSolution: ['', [Validators.required, this.myValidator(this.solution)]],
    });
  }

  submitForm() {

    let postVars = this.contactUs.value;


    
    postVars['recipientEmail'] = this.email;
    postVars['subject'] = this.subject;
    // console.log(postVars);


    this.http.post(this.endpoint, postVars)
      .subscribe((val) => {
        if (val == null) {
          this.contactUs.reset();
          this.presentToast();
        }
      },
        response => {
          console.log("POST call in error", response);
        },
        () => {
          console.log("The POST observable is now completed.");
        })
  }
 

Заглядывая в сеть, я вижу, что sendEmail.php получает ошибку 403 во время предполетной подготовки. Вот скриншот:

сетевые заголовки:

 General:
    Request URL: https://www.websitesberkshire.co.uk/sendEmail.php
    Request Method: OPTIONS
    Status Code: 403 Forbidden
    Remote Address: [my server ip]:443
    Referrer Policy: strict-origin-when-cross-origin

Response Headers:
    Connection: close
    Content-Length: 318
    Content-Type: text/html; charset=iso-8859-1
    Date: Mon, 15 Mar 2021 12:13:40 GMT
    Server: Apache

Request Headers:
    Accept: */*
    Accept-Encoding: gzip, deflate, br
    Accept-Language: en-GB,en-US;q=0.9,en;q=0.8
    Access-Control-Request-Headers: content-type
    Access-Control-Request-Method: POST
    Cache-Control: no-cache
    Connection: keep-alive
    Host: www.example.com
    Origin: http://localhost:8100
    Pragma: no-cache
    Referer: http://localhost:8100/
    Sec-Fetch-Dest: empty
    Sec-Fetch-Mode: cors
    Sec-Fetch-Site: cross-site
    User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/89.0.4389.82 Safari/537.36