使用AJAX加载小部件的相同来源策略

Question

我正在尝试在我的网页中包含一个小部件。小部件的代码是用ajax动态加载的(因为它经常变化，我需要从服务器更新它)，它看起来如下.

<a class="e-widget" href="https://gleam.io/0oIpw/contest-widget" rel="nofollow">This is a Widget!</a>

<script type="text/javascript" src="https://js.gleam.io/e.js" async="true"></script>

在加载时，我在控制台中得到以下错误..。

OPTIONS https://js.gleam.io/e.js 404 (Not Found)
XMLHttpRequest cannot load https://js.gleam.io/e.js. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost:8443' is therefore not allowed access. The response had HTTP status code 404.

如果删除加载小部件数据的ajax调用，而直接插入小部件，则不会得到相同的错误，小部件工作正常。

我已经读到这一点，并认为这是由于相同的原产地-政策(SOP)，所以我现在想知道最好的方法来规避这个政策。

我读过Ways to circumvent the same-origin policy的帖子，但不幸的是，它在这个案例中没有帮助。

因为CORS是在服务器端完成的(我认为？)而JSONP是不安全的，是创建代理的最佳选择吗？

非常感谢你的帮助。我花了好几个小时研究这个问题，我仍然很困惑。

编辑以添加代码以获取更多信息：

当单击命令链接时，页面的信息将通过ajax加载，如下所示：

<h:commandLink action="#{redeemPerk.getDisplay(display.displayId)}" >
                    <h:graphicImage value="#{display.imgUrl}" styleClass="display-icon"/>
<f:ajax event="click" execute="@form" render="redeem-display-data-reveal" listener="#{redeemPerk.getDisplay(display.displayId)}" onevent="handleAjax"/>
</h:commandLink>

这会呈现显示小部件的区域，它看起来像.

    <div class="reveal-modal-background hidden">
        <h:form id="redeem-display-data-reveal">
           <h:panelGroup rendered="#{display.type == 'WIDGET'}">
             <a class="e-widget" href="https://gleam.io/0oIpw/contest-widget" rel="nofollow">This is a Widget!</a>

           <script type="text/javascript" src="https://js.gleam.io/e.js" async="true"></script>
        </h:form>
       </div></h:panelGroup>

第二个代码块与第一个代码块位于一个单独的文件中。重申一下，如果我删除ajax调用并直接加载数据，小部件就能正常工作。

Answer 1

我在您的输出日志中看到了两件可能导致此问题的事情。

首先，它声明您收到了来自请求的404消息。这意味着JavaScript可能没有被正确地上传。

第二，它说请求的来源来自本地主机:8443。这让我相信，您是在本地运行代码，而不是从Internet运行代码。

如果您试图从internet加载插件，但您的代码正在本地测试，您仍然会得到一个SOP错误。要解决这个问题，您需要将所有的代码上传到您的web服务器。一旦你做了，尝试从互联网加载网页，而不是你的本地副本。这应该可以修复SOP错误。