使用 jQuery 的简单 AJAX HTTP GET [重复]答案

【问题标题】：Simple AJAX HTTP GET using jQuery [duplicate]使用 jQuery 的简单 AJAX HTTP GET [重复]
【发布时间】：2015-11-10 22:27:45
【问题描述】：

我对 jQuery 和 AJAX 很陌生，我正在尝试以下代码，只是简单的 http 获取请求。

<html>
<head>
</head>
<body>
    <script src = "jquery-2.1.4.js"></script>
    <script src = "app.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $.get("http://google.com", function(data, status){
                    alert("Data: " + data + "\nStatus: " + status);
                });
            });
        });
    </script>
    <button>Send an HTTP GET request to a page and get the result back</button>
</body>
</html>

我收到以下错误

XMLHttpRequest 无法加载 http://google.com/。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'file://' 不允许访问。

请帮我看看我错过了什么。

【问题讨论】：

被称为资源访问相关的同源策略限制
它声明在服务器端启用 CORS，但在我的情况下它只是 http:://google.com。我该怎么做？
在他们允许我们的网站使用之前，您不能使用谷歌数据。

标签： javascript jquery ajax http-get

【解决方案1】：

同源策略不允许您访问托管在不同服务器上的资源。在您的情况下，如果目标系统不在您的控制之下，您可以查看 jsonp 之类的实用程序，它可以帮助您触发跨域请求。

【讨论】：

【解决方案2】：

因此，根据同源策略的 SOP 在此策略下，Web 浏览器允许包含在第一个网页中的脚本访问第二个网页中的数据，但前提是两个网页具有相同的来源，相同的来源意味着相同URL Scheme 、主机名和端口号。要克服这个问题，你可以使用像

$.ajax({
    url: "http://google.com",
    dataType: "jsonp"},
    success: function( response ) {
        console.log( response ); // server response
    }
})

阅读有关 JSONP 的更多信息。

【讨论】：

【解决方案3】：

这只是您从应用程序发出的跨域请求，您必须确保避免此错误，

1) Enable cors in your application to make a cross domain application.
2) You can use JSONP while making your request to cross domain instead of GET.

请通过此链接，您将获得有关“CORS”的更多详细信息 https://developers.google.com/api-client-library/javascript/features/cors

【讨论】：