AJAX加载小部件的同源策略

Question

I am trying to include a widget in my webpage. The code for the widget is loaded dynamically with ajax (because it changes often and I need to update it from the server) and it looks like this ...

<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>

on load, I get the following errors in the console...

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.

If I remove the ajax call that loads the data for the widget, and instead insert the widget directly, I do not get the same errors and the widget works fine.

I have read into this and figure that it is due to the Same-Origin-Policy (SOP), so I am now wondering the best way to circumvent the policy.

I have read the post Ways to circumvent the same-origin policy but unfortunately did not find it helpful in this case.

Since CORS is done on the server side (I think ? ) and JSONP is insecure, is the best option to create a proxy?

Thanks so much for the help. I have spent quite a few hours researching this and I am still confused.

Edited to add code for more info :

The information for the page is loaded via ajax when a command link is clicked as follows :

<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>

this renders the area that displays the widget, which looks like ...

    <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>

The second chunk of code is in a separate file from the first. To reiterate, if I remove the ajax call and load the data directly the widget works fine.

Answer 1

I am seeing two things in your output log that could be causing the issue.

First, it states that you received a 404 message from the request. Which means the JavaScript has probably not been uploaded properly.

Second, it says that the origin of the request came from localhost:8443. That leads me to believe that you are running the code locally instead of from the Internet.

In cases where you are trying to load a plugin from the internet, but your code is being tested locally you are still going to get an SOP error. To fix this problem you would need to upload all of the code that you do have to your web server. Once you have done that attempt to load the webpage from the Internet and not your local copy. That should fix that SOP error.