CORS预检Header被拦截解决方法

本文旨在帮助开发者解决在跨域资源共享（CORS）预检请求中，自定义Header被服务器阻止的问题。通过配置服务器端响应头，并处理OPTIONS请求，可以有效解决该问题，确保客户端能够成功发送带有自定义Header的请求。

在进行API开发时，跨域资源共享（CORS）是一个常见的问题。当客户端从一个域（例如：http://localhost:8020）向另一个域（例如：http://localhost:8080）发起请求，并且请求中包含自定义Header时，浏览器会先发送一个预检（preflight）请求（OPTIONS请求）到服务器，以确定服务器是否允许该跨域请求。如果服务器没有正确配置，客户端可能会收到类似 "Request header field custom-token is not allowed by Access-Control-Allow-Headers in preflight response" 的错误。

要解决这个问题，需要在服务器端进行如下配置：

1. 设置 Access-Control-Allow-Origin 响应头：

   该响应头指定了允许访问资源的域。在开发环境中，可以设置为 *，允许所有域访问。但在生产环境中，建议设置为具体的域名，以提高安全性。

   header('Access-Control-Allow-Origin: *');

2. 设置 Access-Control-Allow-Headers 响应头：

   该响应头指定了服务器允许客户端在请求中使用的Header。需要将所有自定义Header添加到该列表中。

   header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Custom-Token');

   注意: Origin, X-Requested-With, Content-Type, Accept 是常用的Header，通常需要包含在内。

3. 处理 OPTIONS 请求：

   当客户端发送预检请求时，服务器需要正确处理OPTIONS请求。一种常见的做法是在路由中注册一个OPTIONS请求的处理函数，并返回一个成功的响应。

   options('/{routes:.*}', function (Request $request, Response $response) {
       // CORS Pre-Flight OPTIONS Request Handler
       echo "OK!";
   
       return $response;
   });
   
   $app->get('/income/', function (Request $request, Response $response) {
       $response->getBody()->write(json_encode(['message' => 'Hello, World!']));
       return $response->withHeader('Content-Type', 'application/json');
   });
   
   $app->run();

   在这个例子中，/income/ 接口允许 GET 请求，并且在响应头中设置了 Content-Type 为 application/json。 OPTIONS 请求被路由到特定的处理函数，该函数简单地输出 "OK!" 并返回一个响应。

示例代码总结：

以下是一个完整的PHP示例，展示了如何使用Slim Framework处理CORS预检请求：

add(function ($request, $handler) {
    $response = $handler->handle($request);
    return $response
            ->withHeader('Access-Control-Allow-Origin', '*')
            ->withHeader('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type, Accept, Origin, Authorization, Custom-Token')
            ->withHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, PATCH, OPTIONS');
});


$app->options('/{routes:.*}', function (Request $request, Response $response) {
    // CORS Pre-Flight OPTIONS Request Handler
    return $response;
});

$app->get('/income/', function (Request $request, Response $response) {
    $response->getBody()->write(json_encode(['message' => 'Hello, World!']));
    return $response->withHeader('Content-Type', 'application/json');
});

$app->run();

注意事项：

• 确保在所有需要支持CORS的路由上都进行了上述配置。
• 在生产环境中，务必将 Access-Control-Allow-Origin 设置为具体的域名，而不是 *。
• 如果客户端使用了 Authorization Header，也需要将其添加到 Access-Control-Allow-Headers 中。
• 某些浏览器可能会缓存预检请求的结果。如果修改了服务器端的CORS配置，可能需要清除浏览器缓存才能生效。

总结：

通过正确配置服务器端的CORS响应头，并处理OPTIONS请求，可以有效解决CORS预检请求中自定义Header被阻止的问题。这有助于确保客户端能够成功发送带有自定义Header的跨域请求，从而实现更灵活的API开发。