Question 229215 in PHP Question posted in
Official manual can be found here.

Php – Access with fetch on a long loading API?

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.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 0

    Seems like you’re running into a cors problem when youre trying to grab data from your php rest api. This could be happening because the api takes a while to load and has some complicated calculations going on. The whole cors thing is there to stop unauthorized requests from different places and keep web apps secure.

    First thing to remember is that those CORS headers (like Access-Control-Allow-Origin, Access-Control-Allow-Methods) should be sorted out on the server side. Don’t mess around with them in your js code or php code. It looks like you’re doing that iin both places, and that might be why things aren’t working smoothly.

    Try this:

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

    Also, yoou need to adjust the server’s maximum execution time to prevent premature termination of the request. You can do this in your PHP script using the following line:

    set_time_limit(0); // Set to 0 for no time limit, or a value in seconds
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search