firefox/cors 不允许在 POST 请求中使用 application/json contentType？ [复制]

Question

我想通过 POST 请求（使用 ajax）向我的服务器发送 json，但是每次尝试都被 CORS 阻止。阅读有关它被阻止的原因根本没有帮助。在某些时候，这里的一位 cmets 声称，不允许使用 contentType json 的 POST 请求（抱歉，我再也找不到相关的帖子了）。所以我测试了一些东西。我写了以下php文件：

<?php 
header("Access-control-allow-origin: *");
header('Content-Type: application/json');
echo json_encode(["someVal" => true]);
?>

我在端口8081 上运行它。使用 contentType text/plain 发送 ajax POST 请求可以正常工作，但 application/json 会被 CORS 阻止。

相关的javascript：

$.ajax({
    url: "http://localhost:8081/someapi.php",
    contentType: "text/plain", //"application/json",
    method: "POST",
    crossDomain: true,
    data: {val: "asd"},
    success: function(data, status, xhr) {
        console.log("success");
    },
    error: function(data, status, xhr) {
        console.log("fail");
    }
});

为什么会这样？如果不亲自测试，我可以从哪里获得这些信息？是否可以通过 POST 请求发送json？

Answer 1

使用 Content-Type: text/plain 的 POST 请求算作简单请求，如 Fetch specification 和 MDN 所述。

某些请求不会触发 CORS 预检。这些在本文中被称为“简单请求”，尽管 Fetch 规范（定义 CORS）没有使用该术语。 “简单请求”是满足以下所有条件的请求： 允许的方法之一：

• 获取
• 头
• 发布

除了用户代理自动设置的标头（例如，Connection、User-Agent 或 Fetch 规范中定义为“禁止标头名称”的其他标头）之外，唯一允许手动设置的标头set 是 Fetch 规范定义为“CORS-safelisted request-header”的那些，它们是：

• 接受
• 接受语言
• 内容-语言
• Content-Type（但请注意下面的附加要求）

Content-Type 标头的唯一允许值是：

• application/x-www-form-urlencoded
• 多部分/表单数据
• 文本/纯文本

因此，如果您使用 Content-Type text/plain 发送 POST 请求，则您正在运行“简单请求”。同时使用 application/json 运行一个请求，这需要 CORS 预检请求，这意味着服务器需要以正确的 CORS 标头响应浏览器发送的 OPTIONS 请求。

您也可以使 application/jsonw 正常工作，但您需要从您的网络服务器返回正确的 Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers 标头以回答浏览器发送的 OPTIONS 请求。