node.js - cors 子域失败

Question

域和子域的 CORS 无法正常工作。我有一个 NodeJS 服务器托管在 https://api.example.com 我有两个 ReactJS 客户端

客户端 1. https://example.com

客户端 2。 https://subdomain.example.com

我已将客户端 1 配置为强制 www，以便客户端 1 使用单一来源。当我打开 Clien1 时，它工作正常。当我打开 Client2 时，出现错误

Access to XMLHttpRequest at 'https://api.example.com/someAPI' from origin 'https://subdomain.example.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://www.example.com' that is not equal to the supplied origin

当我按 Ctrl+F5 然后它工作正常但是之后如果我刷新 Client1 然后错误出现在 Client1

Access to XMLHttpRequest at 'https://api.example.com/someAPI' from origin 'https://www.example.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value 'https://subdomain.example.com' that is not equal to the supplied origin.

现在，当我在 Client1 上按 Ctrl+F5 时，它可以正常工作，但同样的错误会转到 Client2。

我的nodeJS服务器配置如下

var whitelist = ['https://www.example.com', 'https://subdomain.example.com'];
    getCorsCoptions(req, callback) {
    var getOriginValue = () => {
      if (whitelist.indexOf(req.header('origin')) !== -1) {
        return true;
      } else {
        log.error(__filename, 'Not allowed by CORS', origin);
        return false;
      }
    }
    var corsOptions = {
      origin: getOriginValue(),
      methods: ['GET', 'POST'],
      credentials: true,
      preflightContinue: false,,
      allowedHeaders:["Content-Type","X-Requested-With","X-HTTP-Method-Override","Accept"]
    }
    callback(null, corsOptions)
  }

app.use('*', cors(this.getCorsCoptions));
app.options('*', cors(this.getCorsCoptions));

我在 React 客户端使用 axios 如下

get(url: string) {
    return Axios.get(url, {
      withCredentials: true
    }).then((res: any) => {
      if (res) {
        return res.data;
      }
      return {};
    });
}

post(url: string, data: any) {
    let requestHeaders = { 'Content-Type': 'application/json' };
    return Axios.post(url, data, {
      headers: requestHeaders
      , withCredentials: true
    }).then((res: any) => {
      if (res) {
        return res.data;
      }
      return {};
    });
}

Answer 1

我找到了解决这个问题的方法。浏览器正在缓存来源。通过在响应中添加以下 header 解决了此问题

Cache-Control: no-store,no-cache,must-revalidate

我还添加了 Vary: Origin 但我认为它没有解决问题我按如下方式管理cors

var whitelist = ['https://www.example.com', 'https://subdomain.example.com'];
router.all("*", (req, res, next) => {
    var origin = req.headers.origin;
    if (whitelist.indexOf(origin) != -1) {
      res.header("Access-Control-Allow-Origin", origin);
    }
    res.header("Access-Control-Allow-Headers", ["Content-Type","X-Requested-With","X-HTTP-Method-Override","Accept"]);
    res.header("Access-Control-Allow-Credentials", true);
    res.header("Access-Control-Allow-Methods", "GET,POST");
    res.header("Cache-Control", "no-store,no-cache,must-revalidate");
    res.header("Vary", "Origin");
    if (req.method === "OPTIONS") {
    res.status(200).send("");
      return;
    }
    next();
});

路由器是 express.Router()

我希望有人觉得这有帮助。