2

我正在尝试从我的 HTML 页面发出 HTTP GET 请求。该应用程序的后端是使用 PHP 和 Laravel 4 框架（用于 PHP）设计的。

API 的后端正在工作。我已经使用curlMac 终端上的命令对其进行了测试

curl -v http://localhost:8888/l4/public/api/v1/getLeaderboard

我现在正在使用 HTML/JavaScript 制作前端。这就是我所拥有的

<script>
        function sampleFunction(){
            alert("hello world ");
        }
        function loadLeaderboard(){
            $.get("http://localhost:8888/l4/public/api/v1/getLeaderboard",function(data,status){
                    alert("Data: " + data + "\nStatus: " + status);
             });
        }
</script>

我试图在页面打开后立即加载它：但是，没有任何反应。我该如何解决 ？

<body onload=loadLeaderboard()>

编辑：这是我在控制台中看到的错误消息：

Uncaught ReferenceError: $ is not defined

编辑 2：我通过提供 jquery 文件的完整路径解决了上述问题，即http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js。最初我没有使用 http://

我目前收到的错误消息是：

XMLHttpRequest cannot load http://localhost:8888/l4/public/api/v1/getLeaderboard. Origin null is not allowed by Access-Control-Allow-Origin
4

3 回答 3

1

这是通过编辑后端代码解决的问题，以便它允许跨源请求。为此，我routes.php在框架中打开文件并将这一行添加到页面顶部

header('Access-Control-Allow-Origin: *');
于 2013-09-21T23:20:55.227 回答
0

目前尚不清楚您的函数是在正文 onload 事件之前还是之后定义的。此外，出于调试目的，我建议使用链接上的单击事件触发此测试。这样您就有时间在浏览器中打开 JavaScript 控制台，这样您就可以看到运行测试时发生的情况。试一下下面的代码。

在 PHP 端，确保您返回的数据是 json 编码的。

$(function() {

    var loadLeaderboard = function (){
        $.get("http://localhost:8888/l4/public/api/v1/getLeaderboard",function(data){
            alert("Data: " + data);
        });
    };

    $('body').on('click', '.test-link', function() {
        loadLetterboard();
    });

});
于 2013-09-21T01:30:03.947 回答
0

Origin null 是本地文件系统，因此这表明您正在加载通过 file:/// URL 执行加载调用的 HTML 页面（例如，只需在本地文件浏览器或类似文件中双击它）。不同的浏览器采用不同的方法将同源策略应用于本地文件。

我的猜测是您正在使用 Chrome 看到这个。Chrome 将 SOP 应用于本地文件的规则非常严格，它甚至不允许从与文档相同的目录加载文件。歌剧也是如此。其他一些浏览器（例如 Firefox）允许对本地文件进行有限访问。但基本上，将 ajax 与本地资源一起使用不会跨浏览器工作。

如果您只是在本地测试一些您将真正部署到 Web 的东西，而不是使用本地文件，请安装一个简单的 Web 服务器并通过 http:// URL 进行测试。这为您提供了更准确的安全图片。

于 2013-09-21T02:34:53.583 回答