Request header field x-requested-with is not allowed by Access-Control-Allow-Headers in preflight response

这个错误通常发生在您尝试向不同源的服务器发送 AJAX 请求时。浏览器会发送一个 OPTIONS 请求作为预检请求（preflight request），以查看服务器是否允许跨域请求。如果服务器没有正确配置 CORS，那么浏览器就会抛出这个错误。

在具体实现上，浏览器会检查 `Access-Control-Allow-Headers` 响应头中是否包含了 `X-Requested-With` 字段。如果没有，那么浏览器就会抛出这个错误。

解决这个问题的方法是在服务器端正确配置 CORS。您需要在服务器端设置 `Access-Control-Allow-Headers` 响应头字段，以允许浏览器发送 `X-Requested-With` 字段。例如，您可以在服务器端设置以下响应头字段：

Access-Control-Allow-Headers: X-Requested-With, Content-Type, Authorization

如果您使用的是 Apache 服务器，您可以在 `.htaccess` 文件中添加以下内容：

Header set Access-Control-Allow-Headers "X-Requested-With, Content-Type, Authorization"

如果您使用的是其他类型的服务器，您需要查看相关文档以了解如何配置 CORS。

相关问题

axios请求报错Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response

当使用axios发起跨域请求时，如果服务器返回了一个预检请求（ Preflight Request，也称为OPTIONS请求），并且`Access-Control-Allow-Headers`头信息中未包含`access-control-allow-origin`，这将导致前端收到错误，提示"Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response"。

这个错误意味着浏览器在发送实际请求之前，由于安全策略（同源策略），先发送一个options请求来检查是否允许从指定的源（origin）访问资源。如果服务器在这个预检请求上不允许特定的header（如`access-control-allow-origin`），那么实际请求就会失败。

要解决这个问题，你需要在服务器端配置跨域响应，确保`Access-Control-Allow-Origin`和`Access-Control-Allow-Headers`设置得正确。例如，在Node.js中使用Express的话，可以这样做：

app.options('*', (req, res) => {
  res.header('Access-Control-Allow-Origin', '*');
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  res.header('Access-Control-Allow-Headers', 'X-Requested-With content-type accept');
  res.status(204).end();
});

确保允许来自任何源的请求，并且允许适当的头信息通过。

设置了之后，访问后端接口的时候还是报错Access to XMLHttpRequest at 'http://localhost:3000/login' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

你在后端设置的 CORS 响应头信息可能缺少对 `Content-Type` 的允许配置，导致浏览器在发送跨域请求时被拦截。

你可以尝试在后端的 CORS 响应头信息中添加 `Content-Type` 字段，允许浏览器发送带有 `Content-Type` 请求头的跨域请求。

以下是一个示例，在 Node.js + Express 框架中如何添加 `Content-Type` 的配置：

app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type"); // 添加 Content-Type
  res.header("Access-Control-Allow-Methods", "PUT, POST, GET, DELETE, OPTIONS");
  res.header("X-Powered-By", '3.2.1');
  res.header("Content-Type", "application/json;charset=utf-8");
  next();
});

在上述示例中，我们在 `Access-Control-Allow-Headers` 中添加了 `Content-Type`，以允许浏览器发送带有该请求头的跨域请求。

请注意，根据你的实际需求和安全要求，可能需要进一步细化对于 `Content-Type` 的配置。确保只允许必要的请求头和方法，以提高安全性。

如果问题仍然存在，请提供更多相关的代码或错误信息，以便更好地帮助你解决问题。