Problem with "Access to XMLHttpRequest" - js, php, ajax

Question

I'm new to web development and I'm struggling with "Access to XMLHttpRequest" problem since 2 days.

There are 4 files : index.html, validate.js, style.css and singup.php.

Inside index.html I just have a code for a form with inputs. Style.css we can skip. Validate.js is below:

function validate(){
if ( email == null && password == null){
alert ("Please fill the details.");
return false;
}
else{
$.ajax({
type: "POST",
url: "signup.php",
data: { email , password},
cache: false,
success: function(html) {
alert(html);
}
});
}

Code from signup.php :

    $db = mysqli_connect('localhost', 'root', '' , 'game');
    $email = $_POST['email'];
    $password2 = $_POST['password'];
    $password = md5($password2);
    $sql = "INSERT INTO users ( email, password) VALUES ( '$email', '$password')";
    $result = mysqli_query ($db, $sql);

Actually 2 days ago it was working fine. I could submit form and I could see new input in database. I made laptop asleep and then tried next day and it just doesn't work anymore.

I try ctrl+shift+i and I see errors:

Access to XMLHttpRequest at 'file:///C:/Program%20Files%20(x86)/EasyPHP-Devserver-17/eds-www/signup.php' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. signup.php:1 ```
Failed to load resource: net::ERR_FAILED

Tried all possible ways which I found (like extensions to Chrome Browser and cmd with "--allow-file-access-files") but it's still the same.

How is it even possible that something works one day and doesn't work next day?

**Never store passwords in clear text or using MD5/SHA1!** Only store password hashes created using PHP's [`password_hash()`](https://php.net/manual/en/function.password-hash.php), which you can then verify using [`password_verify()`](https://php.net/manual/en/function.password-verify.php). Take a look at this post: [How to use password_hash](https://stackoverflow.com/q/30279321/1839439) and learn more about [bcrypt & password hashing in PHP](https://stackoverflow.com/a/6337021/1839439) — Dharman, Jun 23 '20 at 17:37

score 0 · Answer 1 · answered Jun 23 '20 at 15:35

You must load your page via http e.g. http://localhost/index.html instead of file://.

(The clue is in the error message where it says "Cross origin requests are only supported for protocol schemes: http..." .)

Install a local webserver to achieve this. There are several free webservers available, some cross platform and some specific to a single operating system. Some are even built into IDEs. This is quite easy to research, so I'll leave it to you to choose what to use - for this simple case it doesn't really matter which one.

Problem with "Access to XMLHttpRequest" - js, php, ajax

1 Answers1