本文旨在帮助开发者解决在跨域资源共享（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” 的错误。
要解决这个问题，需要在服务器端进行如下配置：
-
设置 Access-Control-Allow-Origin 响应头：
该响应头指定了允许访问资源的域。在开发环境中，可以设置为 *，允许所有域访问。但在生产环境中，建议设置为具体的域名，以提高安全性。
header('Access-Control-Allow-Origin: *');登录后复制 -
设置 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，通常需要包含在内。
-
处理 OPTIONS 请求：
当客户端发送预检请求时，服务器需要正确处理OPTIONS请求。一种常见的做法是在路由中注册一个OPTIONS请求的处理函数，并返回一个成功的响应。
<?php use Psr/Http/Message/ResponseInterface as Response; use Psr/Http/Message/ServerRequestInterface as Request; use Slim/Factory/AppFactory; require __DIR__ . '/../vendor/autoload.php'; $app = AppFactory::create(); $app->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预检请求：
<?php
use Psr/Http/Message/ResponseInterface as Response;
use Psr/Http/Message/ServerRequestInterface as Request;
use Slim/Factory/AppFactory;
require __DIR__ . '/../vendor/autoload.php';
$app = AppFactory::create();
// Add CORS middleware
$app->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开发。
以上就是解决CORS预检请求中自定义Header被阻止的问题的详细内容，更多请关注php中文网其它相关文章！