解决CORS预检请求中自定义Header处理问题
本文旨在解决在使用CORS（跨域资源共享）时，预检请求（preflight request）无法正确处理自定义Header的问题。通过配置服务器端响应头，并确保在预检请求响应中返回文本，可以有效解决该问题，使客户端能够成功发送带有自定义Header的跨域请求。
在使用CORS进行跨域API调用时，如果客户端请求包含自定义Header，浏览器会先发送一个预检请求（OPTIONS请求）到服务器，以确认服务器是否允许该跨域请求。如果服务器未正确配置，预检请求可能会失败，导致实际的API调用被阻止。本文将介绍如何配置服务器端，以允许CORS处理自定义Header，解决“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: *'); // 允许所有来源 // 或者 header('Access-Control-Allow-Origin: https://your-domain.com'); // 允许特定域名 -
Access-Control-Allow-Headers: 指定服务器允许客户端在请求中使用的Header列表。 必须包含你使用的所有自定义Header，以及其他标准Header。
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Custom-Token');请注意，Access-Control-Allow-Headers 必须包含 Origin, X-Requested-With, Content-Type, Accept 等常用Header，以及你自定义的Header，例如 Custom-Token。
-
处理OPTIONS请求: 确保服务器能够正确处理OPTIONS请求，并返回适当的响应。这通常需要在你的API框架中进行配置。
例如，在使用Slim Framework v4时，可以这样处理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();关键点: 在OPTIONS请求的处理函数中，必须输出一些文本内容，例如 "OK!"。这是因为某些浏览器（尤其是Chrome）在处理预检请求时，如果响应体为空，可能会出现问题。
客户端代码
客户端代码需要设置正确的Header，但无需设置 Access-Control-Allow-Headers，这个Header应该由服务器端设置。
axios({
method: 'get',
url: 'http://localhost:8080/income/',
headers: {
'Content-Type': 'application/json',
'Custom-Token': 'vvvv'
},
responseType: 'json'
})
.then(function (response) {
console.log(response);
}).catch(error => console.log(error));注意事项
- 缓存: 浏览器可能会缓存预检请求的结果。如果服务器端的CORS配置发生更改，可能需要清除浏览器缓存才能使更改生效。
- 安全性: 在生产环境中，应谨慎使用 Access-Control-Allow-Origin: *，因为它允许来自任何来源的跨域请求。建议将其设置为特定的域名，以提高安全性。
- 复杂请求: 只有“复杂请求”才会触发预检请求。简单请求是指使用GET、HEAD或POST方法，并且只包含一些标准的Header（例如Content-Type: application/x-www-form-urlencoded、text/plain或multipart/form-data）的请求。
总结
要解决CORS预检请求中自定义Header的处理问题，需要在服务器端正确配置响应头，包括 Access-Control-Allow-Origin 和 Access-Control-Allow-Headers。 此外，确保服务器能够正确处理OPTIONS请求，并在响应中返回文本内容。 通过这些步骤，可以确保客户端能够成功发送带有自定义Header的跨域请求。
