Question

我的localhost上有一个带有表单和jquery / ajax的html文件来处理post数据。一个简单的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。 No＆＃39; Access-Control-Allow-Origin＆＃39;标头出现在请求的资源上。起源＆＃39; http://localhost＆＃39;因此不允许访问。响应的HTTP状态代码为404.

根据我的理解，我需要使用

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

for php。但是当我将它添加到example.com/lookup_update.php时，当localhost文件试图调用它时，该文件会给出404。

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

中

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

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

[修改] 这是我在localhost上的简单表单

<!--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

的开头写下面的代码

UTF-8

而不是*你可以只写Ip地址。

OR

首先，您必须检查localhost或其他服务器上的问题。

试试这段代码：如果你在警报中获得了一些数据，那么问题出现在其他服务器上的localhost else上。

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

Answer 2

CORS请求已被保护＆＃34;使用预检请求。

MDN谈论它here

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

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

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

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

Access-Control-Request-Method: POST

希望这有帮助。

Answer 3

这段代码救了我：

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"

Answer 4

如果您想在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"

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

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

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

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

4 个答案: