在长加载 API 上使用 fetch 进行访问？

Question

我尝试在我编写的纯 PHP REST-API 上使用纯 JS 进行获取。 问题： 由于机会/概率计算，PHP REST-API 的加载时间稍长。

因此，我尝试从一个 Web 服务器访问外部服务器是通过标头操作 CORS 协议。

JS代码：

async function getData() {
        // Default options are marked with *
        //const newURL = "http://" + host + pathname + "/Server" + search;
        const newURL = "MY_DOM_1/" + search;
        console.log(newURL);
        const response = await fetch(newURL, {
          method: "GET",
          mode: "cors",
          cache: "no-cache",
          credentials: "same-origin",
          headers: {
            "Content-Type": "application/json",
            "Access-Control-Allow-Origin": "MY_DOM_1/",
            "Access-Control-Allow-Methods": "GET, POST, PUT, OPTIONS",
            "Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept",
            "Access-Control-Allow-Credentials": "true",
            "Content-Type": "application/JSON"
          },
          redirect: "follow",
          referrerPolicy: "no-referrer"
        });
        return await response.json();
      }

PHP 代码：

<?php
    header("Content-Type:application/JSON");
    header("Access-Control-Allow-Origin: MY_DOM_2");
    header("Access-Control-Allow-Headers: MY_DOM_2");
    header("Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS");
    header("Access-Control-Allow-Credentials: true");
?>

没用...

然后我在两台服务器上添加了 .htaccess 并让它们互相引用，但它不起作用。

错误：

Access to fetch at 'MY_DOM_1/?1' from origin 'MY_DOM_2'
has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by
Access-Control-Allow-Headers in preflight response.
getData.js:7

GET MY_DOM_1/?1 net::ERR_FAILED
getData @ getData.js:7
frame @ loadscreen.js:43
setInterval (async)
(anonymous) @ loadscreen.js:38
getData.js:7   
    
Uncaught (in promise) TypeError: Failed to fetch
    at getData (getData.js:7:26)
    at frame (loadscreen.js:43:12)
getData @ getData.js:7
frame @ loadscreen.js:43
await in frame (async)
frame @ loadscreen.js:43
setInterval (async)
(anonymous) @ loadscreen.js:38
console.log(data);
VM556:1 Promise {<rejected>: TypeError: Failed to fetch
    at getData (MY_DOM_2/tools/js/getData.js:7:26)
  …}[[Prototype]]: Promise[[PromiseState]]: "rejected"[[PromiseResult]]: TypeError: Failed to fetch
    at getData (MY_DOM_2/tools/js/getData.js:7:26)
    at frame (MY_DOM_2/tools/js/loadscreen.js:43:12)

访问确实有效。我通过禁用 PHP 服务器上的计算来测试它。但一旦我让你完成最初的计算并且需要更长的时间，他就会再次让我失去联系。

有人可以帮我吗？不幸的是，对于等待时间很长的 fatchen，我不这么认为。

Answer 1

当您尝试从 php Rest api 获取数据时，似乎遇到了 cors 问题。发生这种情况的原因可能是 API 需要一段时间才能加载并且正在进行一些复杂的计算。整个 cors 的作用是阻止来自不同地方的未经授权的请求并确保网络应用程序的安全。

首先要记住的是，那些 CORS 标头（如 Access-Control-Allow-Origin、Access-Control-Allow-Methods）应该在服务器端进行整理。不要在 js 代码或 php 代码中搞乱它们。看起来您在两个地方都这样做，这可能就是事情进展不顺利的原因。

试试这个：

<?php
    header("Content-Type: application/JSON");
    header("Access-Control-Allow-Origin: http://MY_DOM_2"); // Replace with your actual domain
    header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
    header("Access-Control-Allow-Methods: GET, POST, PUT, OPTIONS");
    header("Access-Control-Allow-Credentials: true");
?>

此外，您需要调整服务器的最大执行时间以防止请求提前终止。您可以使用以下行在 PHP 脚本中执行此操作：

set_time_limit(0); // Set to 0 for no time limit, or a value in seconds