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

Question

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

这是主要部分：

// $.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 无法加载 http://www.example.com/projectX/lookup_update.php。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost' 不允许访问。响应的 HTTP 状态代码为 404。

据我了解，我需要使用

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

对于 php。但是当我将它添加到 example.com/lookup_update.php 时，当 localhost 文件尝试调用它时，该文件会给出 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);
        })

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

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 请求通过 preflight 请求得到“保护”。

MDN 谈论它here

此外，对于可能对用户数据造成副作用的 HTTP 请求方法（特别是对于 GET 以外的 HTTP 方法，或者对于某些 MIME 类型的 POST 使用），规范要求浏览器“预检”请求，使用 HTTP OPTIONS 请求方法从服务器请求支持的方法，然后在服务器“批准”后，使用实际 HTTP 请求方法发送实际请求

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

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

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

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"

将其放在httpd.conf 文件中的Listen 80 行下方。

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

它被测试的环境是使用 XAMPP 的 Apache 服务器上的 Windows 10。 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"