logo标签列表

无法从HTML5应用程序对本地Web服务器进行AJAX调用

javascriptjqueryajaxhtmlsame-origin-policy
3
我正在尝试从HTML5应用程序向本地web服务器发出简单的AJAX请求。然而，由于客户端代码未从Web服务器提供，因此我收到“Origin null is not allowed by Access-Control-Allow-Origin”错误。
我已经尝试了以下帖子中描述的所有内容，但仍然无法正常工作: XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin 如果我将我的服务器代码发布在互联网托管的服务器上，则客户端应用程序可以正常工作。但是我想要它能够在运行在同一台笔记本电脑上的本地MAMP服务器上正常工作。
1）在本地Web服务器上，我在我的PHP控制器中添加了以下内容：
header('Access-Control-Allow-Origin: *');

2）这是我的HTML5客户端应用程序，由于服务器支持CORS，因此不需要使用JSONP。

<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"按钮时，以下是请求/响应标头的结果：

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

我错过了什么吗？ 谢谢你的帮助。
2个回答
4
我发现了问题：
对于本地web服务器(192.168.15.12)的请求，需要在$.getJSON请求中指定完整的URL："http://192.168.15.12/get/leaderboard"
在jQuery调用中，"base"标签没有将"http://192.168.15.12/"添加到URL前缀。
我还需要将以下Apache配置添加到我的.htaccess文件中，以启用跨源资源共享（CORS）(在PHP中这样做并不可靠):
 Header set Access-Control-Allow-Origin *
0

访问：

file:///Users/John/Desktop/index.html

这样做行不通。因为 file:/// 和 localhost 不一样。

你需要访问 http://192.168.15.12/index.html 才能使其工作。

但我正在构建一个客户端应用程序；它不是从网站提供的，所以你的建议行不通。如果我的服务器代码部署在互联网服务器上（例如www.myexternalserver.com），则“file:///Users/John/Desktop/index.html”可以工作，但不能在我的本地Web服务器（192.168.15.12）上工作。 - JMan
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接