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 实际上可以工作 cross-domain，但您必须确保正确设置要从中获取的域以允许请求。

如错误所述，这可以通过在您尝试从中获取的域上放置 Access-Control-Allow-Origin header 来实现。

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

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

Jquery.getJSON is not able to handle cross browser between domain though it should be

ajax

jquery

getjson