Access with fetch on a long loading API?

Question

i tried to fetch with plain JS on a plain PHP REST-API which I wrote. Problem: The PHP REST-API have a slightly high loading time because of chance/probability calculations.

So what I tried to access from one Web-Server to an outher is to manipulate the CORS-Protocoll over the headers.

JS Code:

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 Code:

<?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");
?>

Didn't work...

Then I added the .htaccess on both servers and let them referenced on each other but it won't work.

Error:

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)

Access actually works. I tested it by disabling the calculations on the PHP server. But as soon as I let you run through the original calculations and it takes longer, he'll have me out of touch again.

Can someone please help me with this? Unfortunately, I don't think so in relation to fatchen with a long waiting time.

Answer 1

I edited the your_domain.conf in /etc/apache2/sites-available

here is what I wrote in it:

<VirtualHost *:80>
ServerName Your-ServerName
DocumentRoot /var/www/html
        ServerAlias www.Your-ServerName
        ServerAdmin webmaster@localhost
    DocumentRoot /var/www/Your-ServerName
    ErrorLog ${APACHE_LOG_DIR}/error.log
    CustomLog ${APACHE_LOG_DIR}/access.log combined
        <Directory /var/www/html>
                Options Indexes FollowSymLinks
                AllowOverride All
                Require all granted
                Header always set Access-Control-Allow-Origin "*"
                Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, PUT"
                Header always set Access-Control-Allow-Headers "Origin, Authorization, X-Requested-With, Content-Type, Accept"
                Header always set Access-Control-Allow-Credentials "true"
        </Directory>
</VirtualHost>

After adding the Headers in the Directory section it works.

Only thing what is I need to fix now is to call the asynchron function simultan to the synchron function. But this is not the topic of this Question.

Thanks to the comments that helped me very much.