无法显示 CORS 策略的值答案

【问题标题】：Cannot display values cause of CORS policy无法显示 CORS 策略的值
【发布时间】：2019-04-27 14:37:16
【问题描述】：

我有一个在 v4.3.6 上运行的 Invision 社区论坛，有两个主题。我正在开发一个较新的，我想显示由 json db 提供的在线/总成员。

为此，我制作了这个仅适用于旧主题的脚本：

<p style="margin: 0;">
    Online <img alt="on.svg" src="https://www.xxxxxx.xxxxx/forum/uploads/on.svg" style="width:8px; margin: 0 0 3px 0;"><span id="d-online"></span> | Membri &icirc;n total <img alt="total.svg" src="https://www.xxxxxx.xxxxxx/forum/uploads/total.svg" style="width: 8px; margin: 0 0 3px 0;"><span id="d-total"></span>
</p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script type="text/javascript">
$(document).ready(function(){
  $.getJSON('https://XXXXXXXXXX.xyz/morpheus/db.json', function(jd) {
    $('#d-online').append("&nbsp;", jd.online);
    $('#d-total').append("&nbsp;", jd.total);
 });
});
</script>

这应该给我这个： https://i.imgur.com/I4FdhSN.png

在我正在处理的较新主题上，chrome 在控制台中输出此错误： https://i.imgur.com/n3AL86E.png

我试过了

使用这些规则在网站的根文件夹中创建一个 .htaccess 文件

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

但它根本不起作用，错误仍然出现。
我尝试将托管该 db.json 的网站作为来源，而不是 * 字段上的 *，但它不起作用。
所以我尝试将 htaccess 文件放在论坛所在的 /forum/ 文件夹中，但没有。

我尝试按照this website 上的步骤进行操作，但没有任何反应，javascript 和 php 都不起作用。

错误：

Access to XMLHttpRequest at 'https://xxxxxxxxxx.xyz/morpheus/db.json?csrfKey=3e4139dc5b1b138ab0bcbdf7d20e4735' from origin 'https://www.xxxxxxxxxx.ro' has been blocked by CORS policy: Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers in preflight response.

以下是 chrome 控制台中db.json 标头的一些屏幕截图： https://i.imgur.com/HMbeRV1.png
https://i.imgur.com/xCoDT6R.png

我该如何解决这个问题？

【问题讨论】：

在浏览器的 Network 控制台中检查网络流量。查看OPTIONS 请求的请求和响应标头。如果可以，请发布屏幕截图
完成，我添加了一些截图；这些是正确的吗？
是的，这就是我所追求的。您是否确定已安装并启用了 Apache headers 模块？也许尝试使用Header always set ... 而不是Header add
Header always set 不起作用。我不知道是否安装并启用了 Apache 标头模块，但我认为是的，因为在另一个主题上该脚本可以完美运行。另外我没有 ssh 访问权限，因为我的虚拟主机没有提供给我，所以我无法检查模块是否已启用...
您还需要让 Apache 以正确的方式处理 OPTIONS 请求。请参阅stackoverflow.com/questions/42558221/… 的答案，并查看benjaminhorn.io/code/… 以获得更广泛的操作方法。

标签： javascript apache .htaccess cors

【解决方案1】：

为了解决此类问题，我喜欢使用两个单独的工具：

Fiddler: 一个浏览器路由跟踪器，可满足您所有的网络和 CORS 检查需求。
PostMan: 一种配置必要标头和身份验证配置的简单方法，以确保您拥有所有适当的参数来访问必要的数据。

【讨论】：