本文旨在帮助开发者解决在跨域资源共享（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请求的处理函数，并返回一个成功的响应。
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开发。
以上就是解决CORS预检请求中自定义Header被阻止的问题的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1292093.html
微信扫一扫 
支付宝扫一扫 
