admin管理员组

文章数量:1410725

I'm trying to make a simple AJAX request from an HTML5 app to a local webserver. However, because the client code was not served from the webserver, I'm getting the "Origin null is not allowed by Access-Control-Allow-Origin" error.

I've tried everything described in the following post, but still doesn't work: XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin

If I post my server code on an Internet-hosted server, the client app works. But I'd like it to work with my local MAMP server which is running on the same laptop.

1) On the local webserver, I added the following to my PHP controller:

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

2) Here's my HTML5 client app. JSONP should not been needed since the server supports CORS.

<html>

<head>
    <script src=".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) When I call the client app (file:///Users/John/Desktop/index.html) from Chrome, and click on the leadButton" button, here are the resulting request/response headers:

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

What am I missing? Thanks for your help.

I'm trying to make a simple AJAX request from an HTML5 app to a local webserver. However, because the client code was not served from the webserver, I'm getting the "Origin null is not allowed by Access-Control-Allow-Origin" error.

I've tried everything described in the following post, but still doesn't work: XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin

If I post my server code on an Internet-hosted server, the client app works. But I'd like it to work with my local MAMP server which is running on the same laptop.

1) On the local webserver, I added the following to my PHP controller:

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

2) Here's my HTML5 client app. JSONP should not been needed since the server supports CORS.

<html>

<head>
    <script src="http://ajax.googleapis./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) When I call the client app (file:///Users/John/Desktop/index.html) from Chrome, and click on the leadButton" button, here are the resulting request/response headers:

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

What am I missing? Thanks for your help.

  • javascript
  • jquery
  • ajax
  • html
  • same-origin-policy
Share Improve this question edited May 23, 2017 at 12:03 CommunityBot 11 silver badge asked Nov 3, 2011 at 0:18 JManJMan 1,8055 gold badges21 silver badges34 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 4

I found the problem:

The request to the local webserver (192.168.15.12) requires the full URL to specified in the $.getJSON request: "http://192.168.15.12/get/leaderboard"

The "base" tag did not prepend "http://192.168.15.12/" to the URL in the jQuery call.

I also needed to add the following Apache config to my .htaccess file to enable Cross-Origin Resource Sharing (CORS) (doing this in PHP did not work reliably):

 Header set Access-Control-Allow-Origin *

accesing:

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

won't work. Because file:/// is not the same as localhost.

You need to access http://192.168.15.12/index.html for this to work

本文标签： javascriptCan39t make AJAX call to local webserver from HTML5 appStack Overflow

版权声明：本文标题：javascript - Can&#39;t make AJAX call to local webserver from HTML5 app - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744798888a2625741.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。