Access-Control-Allow-Origin 第一个回复中缺失

Access-Control-Allow-Origin missing on the first response

我正在开发一个通过 CloudFront CDN 服务器资产的 Web 应用程序 (Angular + Rails)。该应用程序通过正确设置为 "Access-Control-Allow-Origin" header 的 nginx 提供服务。 CloudFront 设置为转发 header.

问题是 Angular 模板的第一个响应中缺少 header,但它在后续响应中正确存在(如果我刷新页面)。

例如,如果我清除Chrome中的所有历史记录和缓存并访问该页面,模板文件的响应将不会有"Access-Control-Allow-Origin" header。如果我刷新页面,模板的响应将包含 header.

我注意到如果我清除所有历史记录和缓存,但不清除 cookie,它会继续正常工作。

它在 Firefox 上的行为类似。如果我清除所有历史记录并缓存它在第一个响应上不起作用,但它在后续响应上正常工作。在清除所有历史记录和缓存但没有 cookie 后,它继续正常工作,这与 Chrome.

不同

此外,如果我在 Firefox 中打开开发工具并禁用缓存,则每个响应都会缺少 header。

您知道问题出在哪里吗?我接下来应该看哪里?

谢谢。

"Access-Control-Allow-Origin" 是回应 header,不是请求 header。当 HTTP 客户端使用 OPTION 方法发送请求时,它由 HTTP 服务器返回。例如,当目标 URL 不是当前页面 URL 时,浏览器中的 ajax API 在尝试 POST 请求之前发送一个 OPTION 请求(参见 Cross原始资源共享问题)。此 OPTION 请求包含 "Origin" header,其中包含 URL(方案 + 域)的当前页面开头。 Ajax API 仅当响应包含 header "Access-Control-Allow-Origin" 且 URL 与主页匹配时,才会发送 POST 请求。

如果您想从另一台服务器而不是服务当前页面的服务器访问动态内容,您只需要担心这样的 headers。你这里好像不是这种情况。

有关 CORS 的更多信息,请参阅此维基百科页面:https://en.wikipedia.org/wiki/Cross-origin_resource_sharing

如果还有AngularJS标签, 我建议你不要加载 html 模板,而是将它们全部编译成一个 JS 文件(例如使用 html2js grunt 插件)