Post request to api blocked by CORS policy

Question

I am making a web app with Vue.js, in this web app people have to log in in order to receive an API key. I am making a post request to my API using axios, i am also sending 2 parameters with it, a name and a password. Whenever i submit my form it keeps giving me these errors:

OPTIONS http://localhost/Leerjaar%203/api/apikey/ 500 (Internal Server Error)

and

Access to XMLHttpRequest at 'http://localhost/Leerjaar%203/api/apikey/' from origin 'http://localhost:8082' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

I have been stuck with this issue for months now, i stopped trying months ago but today i decided to get back to it and try again. I have tried setting the headers in my PHP file, but that doesnt seem to work either.

The method that makes the post request:

formSubmit(e) {
            e.preventDefault();
            let currentObj = this;
            axios.post('http://localhost/Leerjaar%203/api/apikey/', {
                docent: this.docentNaam,
                wachtwoord: this.wachtwoord
            })
            .then(function (response) {
                currentObj.output = response.data;
                console.log(response.data);
            })
            .catch(function (error) {

            }); 
        }

My PHP API:

<?php    
session_start();
include "../errors.inc.php";
include "../credentials.inc.php";
include "../database.inc.php";

$docent = Docent();

if (!isset($_POST["wachtwoord"]))    fout(400, "wachtwoord ontbreekt");
if ($_POST["wachtwoord"] !== "test") fout(401, "wachtwoord incorrect");


header('Access-Control-Allow-Origin: http://http://localhost:8081/', false);     
header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
header('content-type: application/json; charset=utf-8');
echo '{"apikey":"'.md5(md5($docent)).'"}';   

My form:

<form @submit="formSubmit">
                            <div class="form-group">
                                <label for="docentNaam">Naam:</label>
                                <input v-model="docentNaam" type="text" class="form-control" placeholder="Docenten afkorting">

                                <label for="wachtwoord">Wachtwoord</label>
                                <input v-model="wachtwoord" type="password" class="form-control" placeholder="Wachtwoord">

                                 <button type="submit" class="btn btn-primary">Submit</button>
                            </div>
                        </form>

This is the header i get back:

I hope someone can help me with my problem, i feel like i have tried everything.

Answer 1

CORS is "cross origin resource sharing", see https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests . Basically, it is enforced by your browser. If the browser is blocking a cross-origin request, you some options:

• Make it not a cross origin request (by hosting everything at the same host and port)

• Satisfy the criteria for "simple request" so the browser let's the HTTP request through

• Implement the server side of CORS on whatever is hosting the POST form, which usually is a web server configuration chore (ie in an httpd.conf file), or by writing a custom OPTIONS request handler that will allow resource sharing to the page which initiates the POST request.

In the last two options, you probably want to think of what the "origin" will look like once your page is live. Allowing access to "*" will probably work, but is undoing the cross site scripting protection that the browser is helping you with.