Jquery.getJSON 不能处理域之间的跨浏览器，尽管它应该是

Question

我正在尝试创建一个 jquery 小部件，该小部件从服务器加载一些数据并将其放入客户端浏览器中的容器中。所以需要注意不同域的跨浏览器调用问题。为此，我使用了 $.getJSON。下面显示了我的 javascript 代码：

(function() {

// Localize jQuery variable
var jQuery;

/** ****** Load jQuery if not present ******** */
if (window.jQuery === undefined || window.jQuery.fn.jquery !== '1.4.2') {
    var script_tag = document.createElement('script');
    script_tag.setAttribute("type", "text/javascript");
    script_tag
            .setAttribute("src",
                    "http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js");
    if (script_tag.readyState) {
        script_tag.onreadystatechange = function() { // For old versions
                                                        // of IE
            if (this.readyState == 'complete'
                    || this.readyState == 'loaded') {
                scriptLoadHandler();
            }
        };
    } else { // Other browsers
        script_tag.onload = scriptLoadHandler;
    }
    // Try to find the head, otherwise default to the documentElement
    (document.getElementsByTagName("head")[0] || document.documentElement)
            .appendChild(script_tag);
} else {
    // The jQuery version on the window is the one we want to use
    jQuery = window.jQuery;
    main();
}

/** ****** Called once jQuery has loaded ***** */
function scriptLoadHandler() {
    // Restore $ and window.jQuery to their previous values and store the
    // new jQuery in our local jQuery variable
    jQuery = window.jQuery.noConflict(true);
    // Call our main function
    main();
}

/** ****** Our main function ******* */
function main() {
    jQuery(document)
            .ready(
                    function($) {
                        getTodaysAd();
                        function getTodaysAd() {
                            var url = "http://localhost:8080/TJ/ads/adsLoader";
                            $
                                    .getJSON(
                                            url,
                                            function(data) {
                                                console.log(data);
                                                $("#todaysAd")
                                                        .append(
                                                                "<a id=\"adsDestination\"><img id=\"adsImg\"></a></img>");
                                                $("#adsImg").attr({
                                                    "href" : data[0].href,
                                                    "src" : data[0].imgurl
                                                });
                                                $("#adsDestination").attr({
                                                    "href" : data[0].href
                                                });
                                            });
                        }

                    });
    }

  })(function() {
  }); // We call our anonymous function immediately

为了运行它，用户只需在页面中添加以下内容：

<script src="http://localhost:8080/TJ/js/embed.js" type="text/javascript"></script>
<div id="todaysAd" class="panel-heading"></div>

但是我仍然收到以下错误：

XMLHttpRequest cannot load http://localhost:8080/TJ/ads/adsLoader. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3003' is therefore not allowed access.

但是当我搜索 $.getJSON 应该能够处理这个问题。有人可以帮忙吗？

******************更新******************************

当我在同一个域中做同样的事情时，一切正常

Answer 1

虽然 $.getJSON 实际上可以跨域工作，但您必须确保正确设置您从中获取的域以允许请求。

正如错误所述，这可以通过在您尝试从中获取的域上放置 Access-Control-Allow-Origin 标头来完成。

有关添加此标头的更多信息，请查看此答案：How does Access-Control-Allow-Origin header work?