cors 子域失败

Question

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

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

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

我已将客户端 1 配置为强制使用 www，以便客户端 1 使用单个源。当我打开 Clien1 时，它工作正常。当我打开 Client2 时，我收到错误消息

CORS 策略阻止了在“ https://api.example.com/someAPI ”处从源“ https://subdomain.example.com ”访问 XMLHttpRequest ：“Access-Control-Allow-Origin”标头具有值 ' https://www.example.com ' 不等于提供的来源

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

CORS 策略阻止了从源“ https://www.example.com ”访问“ https://api.example.com/someAPI ”处的 XMLHttpRequest ：“Access-Control-Allow-Origin”标头具有值 ' https://subdomain.example.com ' 不等于提供的来源。

现在，当我在 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 Client 端使用 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

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

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()

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