时间戳

首页 > 解决方案 > CORS 的问题

javascript - CORS 的问题

问题描述

我有以下 CORS 配置的 nodejs 后端：

app.use(function (req, res, next) {
        res.header("Access-Control-Allow-Origin", "*")
        res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept")
        next()
    })

在前端，发送这样的请求

Axios({
    method: "GET",
    url: `${REACT_APP_API_BASE_URL}/${endpoint}`,
    data: body,
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Headers': '*',
      'Access-Control-Allow-Credentials': true,
      Authorization: `Bearer ${token}`
    },
  });

但在我的网站上，我显示错误：

Access to XMLHttpRequest at 'https://api.example.com/api/category' from origin 'https://example.com' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

我的配置有什么问题？昨天还好好的，不知道今天怎么突然就这样了。

标签： javascriptnode.jscors

解决方案

CORS 主要是在 REST 服务器开始流行时出现的。它是浏览器的安全功能，而不是服务器的。通常，浏览器不想呈现任何来自无法识别的来源的内容。因此，每当网站（前端）从任何服务器端（后端）请求任何数据时，服务器基本上都需要通过将必要的 CORS 标头放入响应标头中来告诉浏览器“这是一个安全的内容，使其可访问”。

要检查这一点，如果您想从出现 CORS 错误的源接收任何数据，请查看本文以禁用 chrome 安全性。禁用安全并再次运行。您将不再看到这些错误。

注意：根本不建议这样做。

这是我通常使用的：

res.header("Access-Control-Allow-Origin", '*');
res.header("Access-Control-Allow-Methods", "GET, PUT, POST, DELETE, PATCH, OPTIONS");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Authorization");

使用星号 (*) 时，任何来源都可以访问内容。您还可以像这样指定来源：

res.header("Access-Control-Allow-Origin", 'http://stackoverflow.com');

或者您可以使用 npm 模块cors让生活变得轻松。

阅读本文以了解有关CORS的更多信息。

推荐阅读