使用 Ajax + PHP 的访问控制允许来源答案

【问题标题】：Access-Control-Allow-Origin with Ajax + PHP使用 Ajax + PHP 的访问控制允许来源
【发布时间】：2020-09-27 05:56:56
【问题描述】：

我有一个我无法解决的问题，尽管已经有几个这样的问题被问到了。然而，没有一个答案对我有帮助：

我有一个这样的简单请求：

$.ajax({
    type: "POST",
    url: webServiceUrl,
    data: JSON.stringify(obj),
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function (msg) {
        alert(msg.d.StatusMessage);
    });

根据我的错误消息，我收到以下错误消息：

从源“http://another-server.net”访问“https://www.my-site.com/myFile.php”处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“Access-Control-Allow-Origin”标头出现在请求的资源上。

我阅读了一些相关信息并尝试了几种方法，例如将 dataType 更改为 jsonp、添加参数 crossDomain: true 以及添加特定的标头，但错误仍然存在。在我的服务器端，我看到请求正在被识别，但我没有任何值或有效负载。

我的 PHP 文件如下所示：

<?php
header("Access-Control-Allow-Origin: *");
$arr = array ('item1'=>"test1",'item2'=>"test2",'item3'=>"test3");      
$test = json_encode($arr);
echo $test;

当我在数据类型中使用jsonp 而不是json 时，我什至得到了一个http 代码200，但是另一个通知出现了，我仍然缺少数据：

跨域读取阻塞 (CORB) 阻止了跨域响应 https://my-site.com/

还有什么我可以尝试的吗？

这是我记录的请求的样子：

HTTP_HOST = www.my-site.com
HTTP_CONNECTION = close
HTTP_ACCEPT_LANGUAGE = de,en-US;q=0.9,en;q=0.8,de-DE;q=0.7
HTTP_ACCEPT_ENCODING = gzip, deflate, br
HTTP_USER_AGENT = Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/81.0.4044.138 Safari/537.36
HTTP_REFERER = http://another-site.net
HTTP_SEC_FETCH_DEST = empty
HTTP_SEC_FETCH_SITE = cross-site
HTTP_SEC_FETCH_MODE = cors
HTTP_ORIGIN = http://another-site.net
HTTP_ACCESS_CONTROL_REQUEST_HEADERS = content-type
HTTP_ACCESS_CONTROL_REQUEST_METHOD = POST
HTTP_ACCEPT = */*
HTTP_CACHE_CONTROL = no-cache
HTTP_PRAGMA = no-cache

【问题讨论】：

headers: { 'Access-Control-Allow-Origin': 'https://my-site.com' } — Access-Control-Allow-Origin 是一个 response 标头。它没有业务正在接受请求。
crossDomain: true 无效，除非您发出 same origin 请求，该请求被重定向为跨源。把它排除在外。
data: "{'qvDataTable':" + JSON.stringify(obj) + "}", — 您正在生成无效的 JSON。不要通过将字符串混合在一起来生成 JSON。只需制作您的对象并通过JSON.stringify 传递整个事情
“当我在数据类型中使用 jsonp 而不是 json 时”- JSONP (a) 与未格式化为 JSON 的响应不兼容，并且 (b) 与发出 POST 请求不兼容
鉴于header("Access-Control-Allow-Origin: *");，我会期望预检选项响应包含Access-Control-Allow-Origin 标头。你应该做一些调试。将日志语句添加到 PHP 以确保触发了正确的脚本。使用浏览器开发者工具中的“网络”选项卡查看发出的请求和您得到的响应。

标签： php ajax cors

【解决方案1】：

根据@DasSaffe 回复更新我的答案，在此处添加他的解决方案：

答案在错误响应中content-type

Request header field content-type is not allowed by Access-Control-Allow-Headers

如果我们的错误响应显示“Content-type”是不允许的，我们还必须在我们的 php 文件中添加以下代码

header('Access-Control-Allow-Headers: Content-Type');

我已经使用 ngrok 创建了 2 个服务器，并按照您的描述做了同样的事情。

我已经删除了下面，它确实有效

        //contentType: "application/json; charset=utf-8", // REMOVE THIS

当我把它加回来时，它给了我错误

Access to XMLHttpRequest at 'https://cfd2365835e8.ngrok.io/research/issueresolver/test.php' from origin 'http://3f6f1317ffc6.in.ngrok.io' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

我假设你的 PHP 有 header("Access-Control-Allow-Origin: *");

尝试一下并更改代码：

$.ajax({
        type: "post",
        url: "YOUR PATH",
        data: {}, 
        //contentType: "application/json; charset=utf-8", // REMOVE THIS
        dataType: "json", KEEP IT LIKE THIS
        success: function (msg) {
            console.log(msg)
            //alert(msg.d.StatusMessage);
        }
    })

附上截图

【讨论】：