[SOLVED] Electron AJAX request return raw PHP

Electron AJAX request return raw PHP

I'm developing a kiosk application with Electron. Currently, I'm stuck with making an AJAX request to the server with a native Javascript code (no JQuery). Every time I made an AJAX request, it always returned the raw PHP code. Here is my project directory:

SelfService
|- script
   |- login.js
|- lib
   |- userAuth.php
|- node_modules
|- index.html
|- index.js
|- package.json
|- package-lock.json

In my javascript, I have tried to set the "Content-Type" to "application/json", or following another example of AJAX request on the net, set it to "application/x-www-form-urlencoded" before sending the XMLHttpRequest, but both of them still returned the raw PHP code.

As for the server side, I have already set the header as "Content-Type: application/json" and use json_encode for the result.

On the side note: I installed the Electron on different drive than my web server. I installed WAMP on default location (C:\wamp) while I installed the Electron on D: Drive (I wondered if that actually matters)

index.html:

<body>
    <input type="text" id="input_id" value="" />
    <button onclick="authenticateID();">Click to authenticate ID</button>
    <div id="response"></div>
</body>

/script/login.js:

function authenticateID () {
    var xhr = new XMLHttpRequest();
    var url = 'lib/userAuth.php'
    var params = 'id=' + document.getElementById('input_id').value;

    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', 'application/json');
//    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');

    xhr.onload = function () {
        if (this.readyState == 4 && this.status == 200) {
            var xhrResult = JSON.parse(xhr.responseText);

            var responseContainer = document.getElementById(response);
            responseContainer.innerHTML = xhrResult.isValidID;
        }
    }

    xhr.onerror = function () { alert('Something went wrong') }
    xhr.send(params);
}

/lib/userAuth.php:

<?php
header('Content-Type: application/json');
$result['isValidID'] = (!empty($_POST['id'])) ? '1' : '0';
echo json_encode($result);
?>

If the user typed in the ID in the textbox, I expect the output will be either "1" or "0", but when I show the xhr.responseText with alert(xhr.responseText), it returned the whole raw PHP code of lib/userAuth.php

EDIT: Now that's a huge mistake I made. I though Electron has some kind of built-in web servers that can process PHP file, so I put my PHP file in the project folder, which is in a different location from the web server. Now I have separated the PHP script into the web server, how am I supposed to set the URL in var url = 'lib/userAuth.php'? I tried localhost/SelfService/lib/userAuth.php but in error log, it says ERR:FILE_NOT_FOUND

Solution

The only reason server is returning PHP code is that your server is not configured properly. Check if your server files resides in localhost server folder.