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.
2
Answers
I edited the
your_domain.conf
in/etc/apache2/sites-available
here is what I wrote in it:
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.
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:
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: