预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Origin。在 CodeIgniter 框架中

Question

我是 codeIgniter 的新手，我已经使用 code-igniter 构建了一个 REST Web 服务。

使用 React JS 的 UI。

在邮递员网络服务中似乎工作正常。但是当我集成到 React JS 中时，它会抛出一个错误。

无法加载http://123.0.0.5:81/codeigniter-rest-api/index.php/auth/login：预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Origin。 EmployeeLogin.js：2 未捕获（承诺）类型错误： 获取失败

我的网络服务是： 123.0.0.5:81/codeigniter-rest-api/index.php/auth/login

我的 React 服务器是： localhost/3000

我已经搜索了解决方案，并在我的控制器中进行了尝试，但无法正常工作。

class Auth extends CI_Controller {
    function __construct() {
        parent::__construct();
        header('Access-Control-Allow-Origin: *');
        header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Authorization");
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");    
    }

我的反应消费脚本是：

(async () => {
          const rawResponse = await fetch('http://123.0.0.5:81/codeigniter-rest-api/index.php/auth/login', {
              method: 'POST',
              headers: {
                  'Accept': 'application/json',
                  'Content-Type': 'application/json'
              },
              body: JSON.stringify(datapost)
          });
          const content = await rawResponse.json();

          alert(content);
      })();

Answer 1

更改：fetch('http://...) 到 fetch('https://...) 或 fetch('//...)。

您不能通过 HTTP 进行 CrossOrigin 请求，只能通过 HTTPS。