启用服务工作者后，CORS错误调用/.auth/me

Question

我在Azure中托管了一个React网站，可用于连接到也在Azure中托管的Web API。它们都由Azure活动目录保护，直到现在为止，我已经能够在前端站点上调用.auth / me API以获得访问令牌并成功对后端进行任何后续API调用。

但是，一旦我在前端站点上启用了服务工作者（通过调用service worker.register（），现在相同的调用会出现以下CORS错误

更新-我发现，如果我将网站安装到设备上（作为其pwa），则通话效果很好。但是在同一设备上的浏览器中（通过chrome，edge，safari测试）仍然无法通过。

值得注意的是，我第一次访问该站点时，通话会正常进行。仅当我关闭浏览器并再次打开它时，上述问题才开始出现。

如果我在网站上执行ctrl + F5，则这将使呼叫再次起作用-直到我关闭浏览器并重新打开。

因此，我猜测服务工作者正在缓存不该缓存的内容。但是，即使经过了长时间的调查，我也无法找出可能是什么。

只需添加一些其他信息-我发现，如果将网站安装到设备上（作为pwa），则通话效果很好。但是在同一设备上的浏览器中（通过chrome，edge，safari测试）仍然无法通过此方法

有人可以帮忙吗？谢谢马特

Answer 1

Cors错误是由于安全性而发生的，它可以保护您的网站免受不受信任的网站的访问。因此，您需要将受信任的网站列入白名单。

请使用以下代码进行操作。相反，如果您不信任所有网站，则可以给您“ *”，让它受到信任。

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