Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers

当浏览器发起跨域请求时，会先发送一个预检请求（OPTIONS请求）给服务器，以确认服务器是否允许该跨域请求。在预检请求中，浏览器会携带一个Access-Control-Request-Headers字段，用于告知服务器实际请求中会携带的自定义请求头。

而服务器在收到预检请求后，需要在响应头中添加Access-Control-Allow-Headers字段，来指定允许的自定义请求头。如果服务器没有正确配置该字段，浏览器就会报错，提示"Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers"。

解决该问题的方法是，在服务器端的响应头中添加Access-Control-Allow-Headers字段，并设置为允许的自定义请求头。例如，如果实际请求中会携带自定义请求头"Authorization"，则可以在响应头中添加如下字段：

Access-Control-Allow-Headers: Authorization

这样浏览器就能正确识别并允许该自定义请求头了。

相关问题

Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response. 是一个错误信息，它表明在预检请求的响应中不允许使用access-control-allow-origin这个字段。这通常是由于跨域请求的限制引起的。浏览器会发送一个预检请求（preflight request）来检查服务器是否接受特定的请求头（Access-Control-Allow-Headers）。如果服务器没有正确配置Access-Control-Allow-Headers，浏览器就会拒绝访问。

vue Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response.

这个错误是一个跨域请求的错误。错误信息"Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response."提示我们在预检请求的响应头中不允许设置"Access-Control-Allow-Origin"。这通常是由于服务器的CORS配置不正确引起的。

从提供的引用中可以看到，问题出现在接口配置的请求头中。在Client代码部分的`axios.request`方法中，`headers`对象中设置了`'Access-Control-Allow-Origin':'*'`。然而，实际上`Access-Control-Allow-Origin`是响应头，而不是请求头。因此，应该将这个配置从请求头中移除，并配置在服务器端的响应头中。

你可以联系后端开发人员，确保在服务器的响应头中正确设置`Access-Control-Allow-Origin`为你的前端应用的域名，例如`'Access-Control-Allow-Origin':'http://localhost:8080'`。