PHP与JS跨域问题解决方法

偷偷努力，悄无声息地变强，然后惊艳所有人！哈哈，小伙伴们又来学习啦~今天我将给大家介绍《PHP与JS跨域问题解决全攻略》，这篇文章主要会讲到等等知识点，不知道大家对其都有多少了解，下面我们就一起来看一吧！当然，非常希望大家能多多评论，给出合理的建议，我们一起学习，一起进步！

本文深入探讨了在PHP和JavaScript应用中遇到的“跨域请求被阻止”（CORS）错误。我们将详细解释CORS机制，提供JavaScript客户端的请求示例，并重点讲解PHP服务器端如何正确配置CORS响应头，尤其是如何有效处理预检（OPTIONS）请求，以确保跨域通信的顺畅与安全。

理解CORS与同源策略

跨域资源共享（Cross-Origin Resource Sharing，CORS）是一种基于HTTP头的机制，它允许浏览器向不同源（域名、协议、端口）的服务器发出XMLHttpRequest或Fetch API请求。默认情况下，浏览器会遵循“同源策略”，即只允许脚本访问同源的资源，以防止恶意网站读取用户敏感数据。当JavaScript代码尝试访问不同源的资源时，如果服务器没有正确配置CORS响应头，浏览器就会阻止该请求，并抛出“Cross-Origin Request Blocked”错误。

JavaScript客户端请求示例

在前端，我们通常使用fetch API或XMLHttpRequest来发起HTTP请求。以下是一个典型的使用fetch发送POST请求的JavaScript代码示例：

const url = 'https://your-backend-domain.com/api/data'; // 替换为你的后端API地址

fetch(url, {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json', // 这是一个非简单请求头，会触发预检
  },
  body: JSON.stringify({ key: 'value' }) // 如果需要发送数据
})
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  })
  .then(data => {
    console.log('Success:', data);
  })
  .catch(error => {
    console.error('Error during fetch operation:', error);
  });

上述代码中，Content-Type: application/json是一个非简单请求头。当请求包含非简单请求头、使用非简单HTTP方法（如PUT、DELETE）或发送自定义头时，浏览器在发送实际请求之前，会先发送一个“预检请求”（Preflight Request），这是一个使用OPTIONS方法的请求，用于询问服务器是否允许该跨域请求。

PHP服务器端CORS配置详解

解决CORS问题的核心在于服务器端正确地响应浏览器发送的CORS相关请求头。在PHP中，这主要通过设置header()函数来实现。

1. 核心CORS响应头

以下是PHP中常用的CORS相关响应头：

• Access-Control-Allow-Origin: 指定允许访问资源的源。
  • *：允许任何源访问。但在生产环境中，出于安全考虑，通常不推荐使用通配符，除非你明确知道并接受其风险。
  • http://localhost:4200 或 https://your-frontend-domain.com：指定一个或多个具体的源。
• Access-Control-Allow-Methods: 指定允许的HTTP方法（如GET, POST, PUT, DELETE, OPTIONS）。
• Access-Control-Allow-Headers: 指定允许的请求头（如Content-Type, Authorization, X-Requested-With）。
• Access-Control-Allow-Credentials: 如果前端需要发送Cookie或HTTP认证信息，则需要将其设置为true。注意，当此头为true时，Access-Control-Allow-Origin不能设置为*，必须指定具体的源。
• Access-Control-Max-Age: 预检请求的缓存时间（秒）。在此时间内，浏览器无需再发送预检请求。

2. 处理预检请求（Preflight OPTIONS Request）

这是解决CORS问题的关键一步。当浏览器发送OPTIONS预检请求时，服务器必须正确响应，告知浏览器实际请求是否被允许。如果服务器未能正确响应预检请求，浏览器将不会发送实际的POST/GET等请求。

<?php

class ControllerCustomapiTest extends Controller {
    public function index() {
        // 允许的源，可以根据实际情况动态设置
        $allowedOrigin = 'https://opecart9349.000webhostapp.com'; // 示例：替换为你的前端域名

        // 检查请求头中的Origin，如果存在且匹配，则设置允许的源
        if (isset($_SERVER['HTTP_ORIGIN']) && $_SERVER['HTTP_ORIGIN'] === $allowedOrigin) {
            header("Access-Control-Allow-Origin: " . $allowedOrigin);
            header('Access-Control-Allow-Credentials: true'); // 如果需要支持Cookie等凭证
            header('Access-Control-Max-Age: 86400'); // 预检请求缓存1天
        } else {
            // 如果不匹配或不存在Origin头，可以根据安全策略选择不设置CORS头或设置默认值
            // 为了本教程的目的，我们暂时允许*，但在生产环境应谨慎
            header('Access-Control-Allow-Origin: *'); 
        }

        // 检查是否是预检请求（OPTIONS请求）
        if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
            // 响应预检请求所需的方法
            if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) {
                header("Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, OPTIONS");
            }
            // 响应预检请求所需的头
            if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])) {
                header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
            }
            // 预检请求处理完毕，直接终止脚本
            http_response_code(200); // 明确返回200 OK状态码
            die('OK'); // 或者 exit;
        }

        // 以下是处理实际GET/POST等请求的代码
        header('Content-Type: application/json');

        $response = array('success' => true, 'message' => 'Data received successfully!');
        // 实际请求的数据处理逻辑...
        // 例如：$input = json_decode(file_get_contents('php://input'), true);

        echo json_encode($response);
    }
}

?>

代码解释：

1. $allowedOrigin: 定义允许的源。在生产环境中，应将其设置为你的前端域名。
2. 动态设置Access-Control-Allow-Origin: 通过检查$_SERVER['HTTP_ORIGIN']来判断请求来源，并只对允许的源设置Access-Control-Allow-Origin。如果需要支持凭证（如Cookie），Access-Control-Allow-Origin就不能是*。
3. if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS'): 这是识别预检请求的关键。
4. Access-Control-Allow-Methods: 根据前端可能使用的HTTP方法，在这里列出所有允许的方法。
5. Access-Control-Allow-Headers: 通常，我们会直接回显浏览器在HTTP_ACCESS_CONTROL_REQUEST_HEADERS中请求的头，以确保所有必要的自定义头都被允许。
6. die('OK'): 在处理完预检请求后，必须终止脚本执行，因为预检请求不需要返回实际的业务数据。浏览器只关心CORS相关的响应头。

重要注意事项

• 安全性：避免在生产环境中使用Access-Control-Allow-Origin: *，除非你明确知道所有潜在的客户端，并能接受任何源访问你的API。更安全的做法是动态地或静态地指定允许的源。
• HTTP_ORIGIN vs HTTP_REFERER：在CORS上下文中，$_SERVER['HTTP_ORIGIN']是更可靠的判断请求源的依据，因为它专门用于CORS请求。$_SERVER['HTTP_REFERER']可能不可靠或不存在。
• 缓存：Access-Control-Max-Age可以有效减少预检请求的频率，提高性能。
• 凭证：如果前端请求需要携带Cookie或HTTP认证信息，Access-Control-Allow-Credentials必须设置为true，并且Access-Control-Allow-Origin必须指定具体的源（不能是*）。
• HTTP/HTTPS：确保你的前端和后端都使用相同的协议（HTTP或HTTPS），或者正确配置了CORS以处理协议差异。

总结

解决PHP和JavaScript中的CORS问题，关键在于理解同源策略和CORS机制，并在PHP服务器端正确配置响应头。特别是要区分和正确处理浏览器的“预检请求”（OPTIONS方法），这是许多CORS问题的症结所在。通过遵循本文提供的指导和代码示例，你可以构建一个既安全又高效的跨域通信环境。

本篇关于《PHP与JS跨域问题解决方法》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！