解决 Angular 与 PHP 跨域请求 (CORS) 策略阻碍：全面指南

本教程旨在解决 angular 应用与 php 后端通信时常见的跨域资源共享 (cors) 策略阻碍问题。文章将深入解释 cors 机制，并提供详细的 php 后端配置方案，特别是如何正确设置 access-control-allow-origin、access-control-allow-methods 和关键的 access-control-allow-headers，确保 angular 客户端能够顺利发起请求，从而实现前后端无缝数据交互。

理解跨域资源共享 (CORS)

跨域资源共享 (CORS) 是一种基于 HTTP 头的机制，它允许服务器指示除自身以外的其他域（源）加载其资源。这是浏览器为了安全而实施的策略，旨在防止恶意网站在未经授权的情况下访问用户数据。当一个网页（例如运行在 https://website.com 的 Angular 应用）尝试从与其自身不同源（协议、域名或端口任一不同，例如 https://api.website.com 或 http://website.com）的服务器（例如运行 PHP 服务）请求资源时，浏览器会执行 CORS 检查。

如果服务器没有在响应中包含正确的 CORS 头部，浏览器就会阻止请求，并在控制台显示类似以下错误： Access to XMLHttpRequest at '...' from origin '...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

关键 CORS 头部及其作用

为了成功处理跨域请求，服务器必须在 HTTP 响应中包含特定的 CORS 头部。以下是解决此类问题最常用的几个头部：

1. Access-Control-Allow-Origin

   • 作用： 指定允许访问资源的源。
   • 示例：
     • header("Access-Control-Allow-Origin: *");：允许任何源访问。这在开发环境中很方便，但在生产环境中应谨慎使用，因为它降低了安全性。
     • header("Access-Control-Allow-Origin: https://your-angular-app.com");：仅允许指定源 https://your-angular-app.com 访问。这是生产环境中的推荐做法。

2. Access-Control-Allow-Methods

   立即学习“PHP免费学习笔记（深入）”；

   • 作用： 指定了允许跨域请求使用的方法，例如 GET, POST, PUT, DELETE, OPTIONS。OPTIONS 方法是预检请求 (Preflight Request) 中使用的，用于询问服务器是否允许实际请求。
   • 示例： header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");

3. Access-Control-Allow-Headers

   • 作用： 这是解决本教程中问题的关键所在。 它指定了在实际请求中允许携带的自定义请求头。当 Angular 客户端发送请求时，可能会自动或手动添加一些标准或自定义头部，如 Content-Type, X-Requested-With, Authorization 等。如果服务器没有明确允许这些头部，浏览器会在预检请求阶段阻止实际请求。
   • 示例： header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
     • Origin: 浏览器自动添加的请求源。
     • X-Requested-With: 通常由 JavaScript 库（如 jQuery、Angular HttpClient）添加，表示请求是通过 XMLHttpRequest 发起的。
     • Content-Type: 指定请求体的媒体类型，如 application/json。
     • Accept: 客户端能够处理的媒体类型。
     • 如果您的应用使用了认证令牌（如 JWT），可能还需要添加 Authorization。

PHP 后端 CORS 配置实践

为了正确处理 Angular 发起的跨域请求，PHP 后端必须在响应中包含正确的 CORS 头部。这些头部应在脚本执行的早期设置，确保在任何内容输出之前发送。

示例 PHP 代码：

无限画

千库网旗下AI绘画创作平台

574

查看详情

<?php
// 允许所有来源访问。在生产环境中，建议替换为具体的 Angular 应用域名。
header("Access-Control-Allow-Origin: *");

// 允许的 HTTP 方法
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");

// 允许的请求头。这是解决常见 CORS 问题的关键。
// Origin: 浏览器自动添加的请求源。
// X-Requested-With: 通常由 JavaScript 库添加，表示请求是通过 XMLHttpRequest 发起的。
// Content-Type: 指定请求体的媒体类型，如 application/json。
// Accept: 客户端能够处理的媒体类型。
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");

// 如果是预检请求 (OPTIONS)，直接返回成功状态码并退出，不执行后续业务逻辑
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    http_response_code(200);
    exit();
}

// 以下是您的实际业务逻辑，例如处理邮件发送
// 在本例中，我们模拟一个简单的响应
echo "Test";

// 实际邮件发送逻辑可能如下：
/*
if (isset($_GET['con_name']) && isset($_GET['con_email']) && isset($_GET['con_message']) && isset($_GET['con_subject'])) {
    $name = $_GET['con_name'];
    $email = $_GET['con_email'];
    $message = $_GET['con_message'];
    $subject = $_GET['con_subject'];

    // 这里可以添加邮件发送逻辑，例如使用 mail() 函数或 PHPMailer
    // mail($to, $subject, $message, $headers);

    echo json_encode(["status" => "success", "message" => "邮件发送成功！"]);
} else {
    echo json_encode(["status" => "error", "message" => "缺少必要的参数！"]);
}
*/
?>

注意事项：

• 头部位置： 确保 header() 函数在任何输出（包括 HTML、空格、BOM头）之前调用，否则会导致 "Headers already sent" 错误。
• OPTIONS 预检请求处理： 浏览器在发送非简单请求（如带有自定义头或非 GET/POST 方法）之前，会先发送一个 OPTIONS 预检请求。服务器必须正确响应这个预检请求，告知浏览器允许的实际请求方法和头部。上述代码片段包含了对 OPTIONS 请求的专门处理。

Angular 前端请求示例

Angular 的 HttpClient 模块会根据配置自动处理请求头。在本例中，前端代码无需特殊修改，只需确保请求 URL 和方法正确。

示例 Angular 代码片段：

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { MatDialogRef } from '@angular/material/dialog'; // 假设使用了 Angular Material Dialog

@Injectable({
  providedIn: 'root'
})
export class MailService {
  name: string = 'user';
  email: string = 'mail@example.com';
  message: string = 'test message';
  object: string = 'Hello World';

  constructor(private http: HttpClient, private dialogRef: MatDialogRef<any>) { }

  // 模拟邮件和表单验证
  mailValidator(): boolean {
    console.log('执行邮件验证...');
    return true;
  }

  validate(): boolean {
    console.log('执行表单验证...');
    return true;
  }

  sendMail() {
    this.mailValidator();
    if (this.validate() && this.mailValidator()) {
      // 构造请求 URL，将数据作为查询参数发送
      const url = `https://website.com/assets/php/mail.php?con_name=${this.name}&con_email=${this.email}&con_message=${this.message}&con_subject=${this.object}`;

      // 发起 GET 请求
      this.http.get(url).subscribe(
        (response) => {
          console.log('邮件发送成功', response);
          // 处理成功响应，例如显示成功消息
        },
        (error) => {
          console.error('邮件发送失败', error);
          // 处理错误，例如显示错误消息
        }
      );
      this.dialogRef.close(); // 关闭对话框
    }
  }
}

提示： 在实际应用中，对于发送表单数据，建议使用 POST 请求并将数据作为请求体（Payload）发送，而不是作为 URL 查询参数。这不仅提高了安全性（数据不会暴露在 URL 中），也更适合发送大量或复杂的数据。

调试与最佳实践

1. 使用浏览器开发者工具：

   • 网络 (Network) 标签页： 检查失败的请求，查看请求头和响应头。特别是关注 Response Headers 中是否包含正确的 Access-Control-Allow-* 系列头部。如果看到 OPTIONS 方法的请求，这就是预检请求，它必须成功并返回正确的 CORS 头部，实际请求才能继续。
   • 控制台 (Console) 标签页： 错误信息会明确指出 CORS 策略阻碍的原因。

2. 生产环境中的 Access-Control-Allow-Origin： 强烈建议不要在生产环境中使用 *。应该将其替换为您的 Angular 应用的精确域名，例如 header("Access-Control-Allow-Origin: https://your-angular-app.com");。如果您的应用有多个子域名或别名，可以动态判断 Origin 请求头并返回相应的 Access-Control-Allow-Origin。

3. HTTPS： 确保前后端都使用 HTTPS，避免混合内容警告和潜在的安全问题。浏览器通常对 HTTPS 到 HTTP 的跨域请求有更严格的限制。

4. Web 服务器配置： 对于更复杂的场景或大型应用，CORS 头部也可以在 Web 服务器层面（如 Apache 的 .htaccess 或 Nginx 配置）进行设置，这通常比在每个 PHP 脚本中设置更高效和集中。

总结

正确配置 CORS 头部是解决 Angular 与 PHP 跨域通信问题的关键。通过在 PHP 后端精确设置 Access-Control-Allow-Origin、Access-Control-Allow-Methods 以及至关重要的 Access-Control-Allow-Headers，可以确保浏览器安全策略允许跨域请求的执行。理解 CORS 机制并结合有效的调试方法，将帮助开发者快速定位并解决此类问题，保障前后端应用的顺畅交互。记住，在生产环境中，始终优先考虑安全性，精确指定允许的源和头部。

以上就是解决 Angular 与 PHP 跨域请求 (CORS) 策略阻碍：全面指南的详细内容，更多请关注php中文网其它相关文章！