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调用并直接加载数据，那么widget工作正常。

Answer 1

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

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

其次，它说请求的来源来自localhost：8443。这让我相信你是在本地而不是从互联网上运行代码。

如果您尝试从互联网上加载插件，但您的代码正在本地测试，您仍会收到SOP错误。要解决此问题，您需要将您拥有的所有代码上传到Web服务器。一旦您尝试从Internet加载网页而不是本地副本。这应该可以解决SOP错误。

AJAX加载小部件的同源策略

1 个答案: