如何在 XAMPP 上启用跨源资源共享？

Question

我的本地主机上有一个 html 文件，其中包含一个表单和 jquery/ajax 来处理 post 数据。一个简单的 php 脚本在 mysql 数据库 table

中查找数据

这是主要部分：

// $.post('lookup_update.php', $(this).serialize()) //<- local part which works
   $.post('http://www.example.com/projectX/lookup_update.php', $(this).serialize()).done(function (data)
                            { etc.

但是当我指向在线 lookup_update.php 时，我在 chrome

中收到以下错误消息

XMLHttpRequest cannot load http://www.example.com/projectX/lookup_update.php. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access. The response had HTTP status code 404.

据我了解，我需要使用

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

为 php。但是当我将它添加到示例中时。com/lookup_update.php，当本地主机文件尝试调用它时，文件会给出 404。

我还尝试将以下内容添加到我的 Xampp apache 配置文件中

Header set Access-Control-Allow-Origin "*"

如何从本地 XAMPP 设置中正确启用跨源资源？

[编辑] 这是我在本地主机上的简单表格

<!--Begin form-->
    <div id="form" class="result">
        <form method="post" id="reg-form"  class="form-horizontal">
            <div class="controls">
                <input type="text" name="code" id="code" placeholder="Code"  class="form-control input-lg" />      
            </div>
        </form>
    </div>
    <!--End form-->

用下面的形式jquery代码

    <script type="text/javascript">
            $(document).ready(function ()
            {
                $(document).on('submit', '#reg-form', function ()
                {
                    var tmpCode = $("#code").val();

//                    $.post('lookup_update.php', $(this).serialize())
                      $.post('http://www.example.com/projectX/lookup_update.php', $(this).serialize())
                            .done(function (data)
                            {

                                $("#reg-form").fadeOut('slow', function ()
                                {
                                    $(".result").fadeIn('slow', function ()
                                    {
                                        console.log("inner test " + tmpCode);
                                        $(".result").html(data);


                                        setTimeout(function () {
                                            location.reload();
                                            $('input').val("");
                                        }, 3000);


                                    });
                                });
                            })
                            .fail(function ()
                            {
                                alert('fail to submit the data');
                            });
                    return false;
                });


            });

        </script>

[编辑 2]

好的，我认为这与在线 lookup_update.php 文件无关，因为我正在使用它在另一个文件中进行测试

            var testXHR = $.post("http://www.example.com/projectX/lookup_update.php", function (data) {
            alert("success:" + data);
        })

并且在警报弹出窗口中 window 我看到了预期的数据

Answer 1

您必须在 lookup_update.php

的开头编写以下代码

header('Access-Control-Allow-Origin: *');
header('Content-type: application/json');

您可以只写 IP 地址而不是 *。

或

首先你必须检查本地主机或其他服务器上的问题所在。

试试这个代码：如果你在警报中得到一些数据，那么问题出在其他服务器上的本地主机上。

$.post( "test.php", function( data ) {
alert( "Data Loaded: " + data );
});

Answer 2

CORS 请求是 "secured" 和 preflight 请求。

MDN 对此进行了讨论here

Additionally, for HTTP request methods that can cause side-effects on user data (in particular, for HTTP methods other than GET, or for POST usage with certain MIME types), the specification mandates that browsers "preflight" the request, soliciting supported methods from the server with an HTTP OPTIONS request method, and then, upon "approval" from the server, sending the actual request with the actual HTTP request method

这只是一个猜测，但您可能正在使用一个框架，并且您忘记为您的请求启用（实施）OPTIONS 路由。

值得注意的是，您不应该使用通配符 header（允许任何站点对您的服务进行 CORS），而应该指定一个白名单。

您应该发送的另一个 header 是允许的请求方法。

Access-Control-Request-Method: POST

希望这对您有所帮助。

Answer 3

如果你想在 httpd.conf 文件中允许 CORS，这对我有用：

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "X-Requested-With, Content-Type, X-Token-Auth, Authorization"

Put it below the Listen 80 line in the httpd.conf file.

当我只使用 Header set Access-Control-Allow-Origin "*" 时，GET 请求有效，但 POST 没有。

它被测试的环境是 Windows 10 在 Apache 服务器上使用 XAMPP。 Apache 正在托管一个 Laravel 项目。

Answer 4

这段代码救了我：

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "X-Requested-With, Content-Type, X-Token-Auth, Authorization"

如何在 XAMPP 上启用跨源资源共享？

How do I enable cross-origin resource sharing on XAMPP?

php

apache

config

cross-domain