Javascript 访问控制仅允许Chrome、Safari但不允许Opera中出现源站标头错误

我已在apache Web服务器上启用访问控制允许源代码。我能够在第一次加载时加载所有请求。但是，随后加载/刷新页面会导致一半的请求失败，导致错误为

XMLHttpRequest cannot load http://***. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

在ChromeDeveloper工具的网络选项卡下，启用“禁用缓存”将删除此错误

我正在使用AngularJS$http调用我的请求，我已将缓存选项更改为true/false，但这种异常仍然存在。供您参考，我也在使用角度缓存模块，我也尝试过启用/禁用该模块，但没有效果

以下是请求标头的副本：

GET ***Valid_Url_With_Parameters** HTTP/1.1
Host: ********
Connection: keep-alive
Accept: application/json, text/plain, */*
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.116 Safari/537.36
Referer: http://localhost:3000/
Accept-Encoding: gzip, deflate, sdch
Accept-Language: en-US,en;q=0.8

我有两个不同类型的响应头，对于失败的请求有不同的HTTP状态代码

HTTP/1.1 200 OK
Content-Length: 564121
Content-Type: application/json
Server: Apache/2.2.15 (CentOS)
Vary: Accept
Last-Modified: Fri, 16 Sep 2016 12:41:41 GMT
Connection: keep-alive
Date: Fri, 16 Sep 2016 12:43:44 GMT


HTTP/1.1 206 Partial Content
Content-Type: application/json
Server: Apache/2.2.15 (CentOS)
Vary: Accept
Last-Modified: Fri, 16 Sep 2016 13:39:05 GMT
Content-Range: bytes 29200-29200/785592
Content-Length: 1
Connection: keep-alive
Date: Fri, 16 Sep 2016 14:20:48 GMT

这似乎与缓存有关。第一次加载页面时，所有请求都具有正确的访问控制标头。后续刷新/重新加载将删除此标头。如何继续使用缓存并保留访问控制标头

编辑：

再加上，我尝试使用Safari，同样的异常也出现了。它将在第一次尝试时加载，但随后的加载将抛出“无访问控制允许原点”错误。但是，这一次，Safari中的响应头显示为空白

编辑2：

Firefox中也出现异常，但Opera Beta版本40.0.2308.52中未出现异常。我开始怀疑这是否是浏览器的原因。访问控制允许源标题也存在

Opera中的响应头

HTTP/1.1 200 OK
Access-Control-Allow-Origin: *
Allow: GET, POST, HEAD, OPTIONS
Content-Type: application/json
Date: Sat, 17 Sep 2016 06:56:53 GMT
Server: Apache/2.2.15 (CentOS)
Vary: Accept
Transfer-Encoding: chunked

编辑3： 我想补充一点，我正在提取的请求是大量数据。我拉过去7天的历史数据，有大约20个JSON文件，每个从500KB到1000KB不等。我注意到，当我将查询参数更改为拉入一个小的数据历史记录时，不会发生此错误

---

非常感谢您的帮助。

我发现的一个解决方法是在服务器上动态生成一个javascript文件，作为包含在页面中的资源。这不需要被CORS阻止并可以缓存的AJAX。

我建议您在浏览器中添加chrome扩展

允许控制允许原点：*

---

在Chrome中，当在“Access Control Allow Origin”标题中返回特定值时，我们也遇到了同样的问题。我们能够通过在响应标题中包含

Vary:Origin

来解决这个问题

Chrome似乎将响应头（包括“Access Control Allow Origin”）视为缓存响应的一部分。因此，如果它从不同的来源请求相同的文件，缓存中的头将不匹配。但是如果您包括

Vary:Origin

，它会让Chrome知道响应（在我们的例子中只有这一个标题）将根据请求的来源而不同

这说明：

如果服务器发送带有访问控制允许源的响应 值（而不是“*”通配符），然后 响应还应该包括一个带有值的Vary响应头 来源-向浏览器指示服务器响应可能不同 基于原始请求标头的值

---

不幸的是，这是不可能的，因为我几乎没有访问服务器API的权限。它由第三方控制。是的，它确实依赖于浏览器到浏览器，不过您是否尝试过在web中添加内容安全元标记app@PrateekRathore没有。请您详细说明一下，或者我可以如何添加它？添加好这一点，您可以添加更多内容，并通过实现内容安全的真正含义使其更富有成效Policy@PrateekRathore我在标题中添加了这一点，但不幸的是，交叉源错误仍然存在。我还尝试将API的URL添加到默认src中，但错误仍然存在。您还必须在server.htaccess文件中添加Allow Access Origin头。你做到了吗？