javascript - 无法从 HTML5 应用程序对本地网络服务器进行 AJAX 调用

标签 javascript jquery ajax html same-origin-policy

我正在尝试从 HTML5 应用向本地网络服务器发出简单的 AJAX 请求。 但是,因为客户端代码不是从网络服务器提供的,所以我得到了 “Access-Control-Allow-Origin 不允许 Origin null”错误。

我已经尝试了以下帖子中描述的所有内容,但仍然无法正常工作:XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin

如果我在 Internet 托管的服务器上发布我的服务器代码,则客户端应用程序可以运行。 但我希望它能与在同一台笔记本电脑上运行的本地 MAMP 服务器一起使用。

1) 在本地网络服务器上,我将以下内容添加到我的 PHP Controller 中:

header('Access-Control-Allow-Origin: *');

2) 这是我的 HTML5 客户端应用程序。不需要 JSONP,因为服务器支持 CORS。

<html>

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.js"></script>
    <base href='http://192.168.15.12/'></base> <!-- local MAMP server -->     
    <script>

        $(document).ready(function() {
                $('#leadButton').click(function(){

                    $.getJSON(
                        'get/leaderboard',
                        function(data){
                            var leader;

                            leader = "<div> The top leader is from local webserver is: " +  data[0].name + "</div>";
                            $('#leaderboard').append(leader);
                            console.log(data);
                        }
                    );     
                });
        });
    </script>
</head>

<body>
    <div id="leaderboard">Leaderboard
        <button id="leadButton">Get Leaderboard</button>
    </div>
</body>

3) 当我从 Chrome 调用客户端应用程序 (file:///Users/John/Desktop/index.html) 并单击 leadButton"按钮时,生成的请求/响应 header 如下:

Request URL:http://192.168.15.12/get/leaderboard
Request Method:OPTIONS
Status Code:403 Forbidden

Request Headers
Access-Control-Request-Headers:Origin, X-Requested-With, Accept
Access-Control-Request-Method:GET
Origin:null

Response Headers
Connection:Keep-Alive
Content-Length:227
Content-Type:text/html; charset=iso-8859-1
Date:Thu, 03 Nov 2011 19:03:27 GMT
Keep-Alive:timeout=5, max=100
Server:Apache

我错过了什么? 感谢您的帮助。

最佳答案

我发现了问题:

对本地网络服务器 (192.168.15.12) 的请求需要在 $.getJSON 请求中指定完整的 URL:“http://192.168.15.12/get/leaderboard”

“base”标签没有在 jQuery 调用中的 URL 前加上“http://192.168.15.12/”。

我还需要将以下 Apache 配置添加到我的 .htaccess 文件中以启用跨源资源共享 (CORS)(在 PHP 中执行此操作并不可靠):

 Header set Access-Control-Allow-Origin *

关于javascript - 无法从 HTML5 应用程序对本地网络服务器进行 AJAX 调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7988933/

相关文章:

javascript - ClearInterval() 和 SetInterval()

javascript - Slickgrid 不会渲染或填充表/网格中的 JSON 数据

javascript - 从单页返回上一个类别

javascript - 如何使用 Javascript Promise 在循环中按顺序执行 AJAX 调用

javascript - 如何用html css和javascript用空格编码进度条

javascript - 如何在到达某个位置时激活间隔?

javascript - 图像在所有版本的 Internet Explorer 上显示不正确

jQuery - 将 "selected"应用于特定值的选项

javascript - 使用 Select2 远程加载设置默认选项

c# - 通过ajax获取json数据