React.js + PHP/Apache：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段内容类型

Question

我想在 React.js 中创建一个联系页面。单击提交按钮后，使用 fetch 方法（使用 POST）调用 PHP 页面（在 Apache 上）。不幸的是，我不断收到以下错误（在我的 localhost:3000/dev 机器和 Apache 服务器上：

Access to fetch at 'http://example.com/dir/email.php' from origin 'http://localhost:3000' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

这是提交时调用的sendEmail 函数：

  sendEmail() {
    fetch('http://example.com/dir/email.php', {
      method: 'POST',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        'firstname': this.state.firstName,
        'lastname': this.state.lastName,
        'message': this.state.message
      })
    }).then(function(response) {
      console.log(response);
      return response.json();
    }).then(function (json) {
      console.log(json);
    });
  }

我的 PHP 脚本现在看起来像这样（我现在没有任何逻辑）：

<?php
  header('Access-Control-Allow-Origin: *');
  header('Access-Control-Allow-Methods: GET, POST');
  header("Access-Control-Allow-Headers: X-Requested-With");

  echo json_encode(array('success' => true));

我也尝试添加一个 .htaccess 文件，其内容如下，但这似乎也不起作用：

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Content-Type "*"
    Header set Access-Control-Accept "*"
    Header set Access-Control-Allow-Methods "GET, POST"
    Header set Access-Control-Allow-Headers: X-Custom-Header
</IfModule>

我认为问题应该出在服务器上，因为我在fetch 上找到的所有示例看起来都像我的。我搜索了这个问题，但我找到的答案不起作用或者是针对 Express 服务器的。

也许还有其他更好的方法可以在 React.js 中创建像这样的简单联系表单，所以我愿意接受建议。我对 React.js 很陌生，所以我很有可能遗漏了一些明显的东西......

非常感谢您的任何意见！

Answer 1

在发出 CORS 请求（即域名与 html 的域不同的 AJAX/JSON/HTTP 请求）之前，浏览器将发送一个带有 OPTIONS 方法的“飞行前请求”。

参考：https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request

所以，把它放在你的 php 文件中：

<?php
// CORS support
header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Headers: *");

// https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
if($_SERVER["REQUEST_METHOD"] == "OPTIONS") exit();
// before sending CORS request, modern browsers often make "pre-flight request" in order to see which headers are allowed/accepted from custom origin
// that request must be answered with status code 200 OK, and must contain header Acces-Control-Allow-Headers

解释：

• 预检请求旨在确保服务器理解该请求是 CORS 请求。
• “Access-Control-Allow-Header”列出了可用于后续 CORS 请求的所有 HTTP 标头

更详细的解释可以在上面的参考链接中阅读