如何在ajax授权和cors的第二个响应中显示内容？

Question

我已经在vps中构建了基本授权和cors.

curl -X OPTIONS -i http://111.111.111.111

HTTP/1.1 200 OK
Date: Sat, 15 Sep 2018 08:07:37 GMT
Server: Apache/2.4.6 (CentOS)
Access-Control-Allow-Origin: http://127.0.0.1
Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Authorization,DNT,User-Agent,Keep-Alive,Content-Type,accept,origin,X-Requested-With
Allow: OPTIONS,GET,HEAD,POST,TRACE
Content-Length: 0
Content-Type: httpd/unix-directory

curl -u xxxx:xxxx -i http://111.111.111.111/remote.php

HTTP/1.1 200 OK
Date: Sat, 15 Sep 2018 08:08:07 GMT
Server: Apache/2.4.6 (CentOS)
Access-Control-Allow-Origin: http://127.0.0.1
Access-Control-Allow-Methods: POST, GET, PUT, DELETE, OPTIONS
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Authorization,DNT,User-Agent,Keep-Alive,Content-Type,accept,origin,X-Requested-With
Last-Modified: Sat, 15 Sep 2018 07:54:13 GMT
ETag: "24-575e43f02c324"
Accept-Ranges: bytes
Content-Length: 36


<?php
echo  '{"name","myname"}';
?>

您可以看到授权和cors处于良好状态.

我的本地目录中的test-ajax-cors.html /var/www/html.

<script src="http://127.0.0.1/jquery-3.3.1.js"></script>
<script>
function Ajax( ) {
    var url = 'http://111.111.111.111/remote.php';
    $.ajax(url, {
        type:"post",   
        crossDomain: "true",
        dataType:"json",
        beforeSend:function(xhr) {
            xhr.setRequestHeader('Authorization',"Basic " + btoa("xxxx:xxxx"))},
        success:function(response){
        data = JSON.stringify(response);
            alert(data);
            mytext = $("#remote");
            mytext.append(data);
        },
        error: function (e) {
            alert("error");
        } 
    });
};
</script>

<input type="button" value="show content" onclick="Ajax();">
<p id="remote">the content on remote webpage</p>

中的remote.php http://111.111.111.111.

cat /var/www/html/remote.php

<?php
echo  '{"name","myname"}';
?>

键入127.0.0.1/test-ajax-cors.html,单击show content,
1.i得到警报信息:错误
2.remote.php被调用了两次127.0.0.1/test-ajax-cors.html(show content按钮127.0.0.1/test-ajax-cors.html 单击了一次).

何时第一次调用remote.php,remote.php的resposne中没有内容.
第一个请求可能是CORS-preflight请求,浏览器发送OPTIONS请求而没有任何Authorization标头,在我的情况下,服务器向浏览器发送200状态代码,这意味着一切都处于良好状态.

remote.php响应的内容第二次调用remote.php时的响应.
如何使第二个响应中的内容显示为 127.0.0.1/test-ajax-cors.html.
感谢Sally CJ的通知.

yum install mod_php
systemctl restart httpd

输入127.0.0.1/test-ajax-cors.html,单击show content.
1.alert错误信息

2. remote.php被召唤两次,所有的反应remote.php都是一样的.

{"name","myname"}

内容是我所期望的,为什么不能在网页中显示 127.0.0.1\test-ajax-cors.html,这导致警报错误信息？

Answer 1

首先，看起来您的服务器设置不正确，因为您的PHP脚本未执行，响应只是返回脚本的内容（我看到您已经使用 解决了这个问题mod_php）。

其次，{"name", "myname"}不是有效的JSON。您的响应应该是{"name": "myname"}或者为了方便起见，您应该始终json_encode是一个PHP数组，例如：

<?php
// Set the correct Content-Type
// this helps when viewing in browser console, and is generally needed
header('Content-Type: application/json');

// Create an array with needed response data
$result = [
    'name' => 'myname'
];

// Convert PHP array to a correct JSON string and echo it
echo json_encode($result);

这样您JSON将始终有效，或者至少您会看到有助于您调试的错误。

更正您的回复后，您可以执行以下操作：

success: function(response, textStatus, jqXHR) {
    // var stringData = JSON.stringify(response); you don't need this
    // since jqXHR object already contains the raw response text

    // It's recommended to prefix variable name with $
    // that way you will always know that it is a JQuery object
    var $mytext = $("#remote");
    $mytext.text(jqXHR.responseText);

    // console.log(response); is better than alert 
    // unless you really need to pause the script
    alert(response.name);
}

请注意，它JQuery足够智能，可以判断请求是否是pre-flight请求，因此您的回调应该仅在第二个请求传递内容时触发。