1

So Im working inside a full blown ZURB Template project which was installed via the foundation client. I already finished some prerequisites like enabling ES7 Features async/await in Babel7 (ZURB Foundation uses gulp as taskrunner, Babel7 as transpiler and webpack4 as module bundler).

I want to set up a backend for my website and since I have the most experience with php, I chose php. I already did a successful AJAX to my first php file, at least kind of.

Here is the ajax I executed from my Javascript:

function phpAJAX(){
  console.log("phpAJAX was called")
  $.get("/../assets/php/test.php", {

  }).then((response) => {
    console.log(response)
  })
}

And here is the code on the php side:

<?php

echo "Hello!";

?>

And here is the result I get in the browser console

phpAJAX was called            indexLogic.js:24:2
<?php                         indexLogic.js:28:4



echo "Hello!";



?>

My PHP was set up as described here (I have no admin privileges on my devMachine...) https://www.quora.com/Can-PHP-be-run-without-installing-WampServer-for-Windows

and I set my root folder for my php to serve like this: php -S 0.0.0.0:8080 -t D:\foundationtests\src\assets\php

I dont have a lot of experience with webservers. I hope that this minimal configuration suffices to just locally run the server and have AJAX Calls sent to the respective php scripts watched/served by the phpServer. However, since I only have little experience with setting up webservers, I have no idea whether the above, partially undesired response is due to a malconfigured AJAX, insufficient php script or a wrongly configured server ^^

EDIT:

I also already tried addressing the localhost directly, like so

function phpAJAX(){
  console.log("phpAJAX was called")
  $.get("none", {

  }).then((response) => {
    console.log(response)
  })
}

But then I got the following error in my browser console:

Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf http://localhost:8080/test.php. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt)
1

$.get("/../assets/php/test.php", looks wrong - note that PHP will be executed on the serverside while JS will be executed in your browser. if you try to request something using ajax with a local path it will try to load that file. This is also why you recieve the file contents instead of the data.

If you want to recieve data from your server you have to call the http request using an URL like $.get("http://myApi.com") or using an IP address / localhost instead of http://myApi.com.

https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started

edit:

Your error comes from the so called "cross origin policy" and you have to activate CORS on your server:

https://developer.mozilla.org/de/docs/Web/HTTP/CORS

https://enable-cors.org/server_php.html

  • Yeah I tried that addressing the URL of the server process first, but my browser threw a warning: Quellübergreifende (Cross-Origin) Anfrage blockiert: Die Gleiche-Quelle-Regel verbietet das Lesen der externen Ressource auf localhost:8080/test.php. (Grund: CORS-Kopfzeile 'Access-Control-Allow-Origin' fehlt) Furthermore, the way I did the AJAX is also used in another project Ive been working in, although I havent any insight on how the server was configured there. I just wrote the code for both front- and backend ^^ – baryon123 Aug 13 at 14:48
  • bro this is a german error, but i am german, too :D This is because of the cross origin policy. You have to allow CORS on your server to get rid of that error – messerbill Aug 13 at 14:54
  • enable-cors.org/server_php.html – messerbill Aug 13 at 14:55
  • Well, yeah, but isnt that kind of dangerous?^^ from a security-perspective I mean? :D – baryon123 Aug 13 at 15:01
  • 1
    Ok, thanks bro! :) – baryon123 Aug 13 at 15:05

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.