API Post from Vue to Cake Backend fails on reload - vue.js

Question

API Post from Vue to Cake Backend fails in certain conditions of reloading FrontEnd, BackEnd, browser and/ or Computer..
I am developing an app with Vue.js as Frontend Framework and CakePHP 3.8 as Backend Framework. I have set up a few Forms in Vue from which I am making POST Requests to several Cake Backend Endpoints. My GET requests are working fine..
In certain conditions I get an error message. This error message disappears once I remove some code, try again, and then put back the original code and try again.. Error message says there is a CORS block, but it says so with all errors, also with spelling errors. So the error message is totally in this case. So with exactly the same code the request works after removing, retrying, and putting back..
Root Cause & Solution
Important thing helping me in finding the solution was realising that the Console was giving the wrong error (CORS). The error log in CakePHP was a lot clearer. This one gave an error Error: [PDOException] SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'name' cannot be null (Cake error.log). So the data written to database could not be saved to the database.. The error was in handling the POST data on the Cake Backend.
The solution of the problem was to first perform the request data check before making the save.. if($data){}
***What I think is the problem is connected to the time lag in establishing first connection with the Back-End.. Wants to immediately make the save without having established the data.. Apparently this only happens when starting up the system. ***
Does anyone have a better explanation for this?
Vue Front-End Code:
<template>
<div id="addpacklist">
{{post_data}}
<p v-if="errors.length">
<b>Please correct the following error(s):</b>
<ul>
<li v-for="error in errors">{{ error }}</li>
</ul>
</p>
<form v-on:submit.prevent="addPackinglist">
<h2>Add PackingList</h2>
<label for="name">Name:</label>
<input type="text" id="name" v-model="name"><br>
<input type="submit" value="Submit">
</form>
</div>
</template>
<script>
var data = [];
import $ from 'jquery';
// you will use v-model & data on edits..
export default{
name :'addpacklist',
data(){
return{
errors: [],
name: '',
post_data: '',
}
},
methods: {
addPackinglist(){
this.errors = [];
// form validation
if(!this.name){
this.errors.push('Name required.');
}
if (this.name.length > 10){
this.errors.push('Name maximum 10 Characters');
}
if(this.name && this.name.length < 11){
// cannot use associative arrays in Javascript : does not exist!!
data[0] = this.name;
console.log(data);
fetch('http://wampprojects/holidays_backend/packinglists/add', {
method: 'POST',
mode: 'cors',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
.then(response => response.json())
.then(json_data => this.post_data = json_data)
.catch(error => {
console.log("error");
});
}
},
},
}
</script>
Cake Back-End Code:
public function add(){
$data = $this->request->data;
$sendback = "";
// build up data object and save to database
$packinglist = $this->Packinglists->newEntity();
// if you do not perform this check you will get an error
// I think it has something to do with establishing the first link from Front-End to Back-End (Session)
// THIS IS WHAT I ADDED TO MAKE IT WORK!!
if($data){
$packinglist->name = $data[0];
// something wrong with saving entity
if($this->Packinglists->save($packinglist)){
$sendback = "save success";
}else{
$sendback = "save failed";
};
}
// no automatic view, only data returned
$this->autoRender = false;
return $this->response
->withType('application/json')
->withStringBody(json_encode($data));
}
Some scenario’s I logged..
When stopping one element and keeping browser on..
**When stopping & restarting the local dev server for Vue it still works. (ok)
**When stopping & restarting internet still works. (ok)
**When stopping & restarting wamp server still works.. (ok)
**When stopping & starting wamp server still works.. (ok)
When stopping one element & shutting browser down..
**Stop Wamp & restart (ok)
**Stop Wamp & start (ok)
**Stop Vue & restart (ok)
**Stop Internet & restart (ok)
When stopping & (re)starting Vue & Wamp & keeping browser on..
**When first restarting Wamp, then Vue.. (ok)
**When first starting back up Wamp, then Vue. (ok)
**When first restarting Vue with “npm run serve”.. Then start all services wamp.. (nok)
**When first restarting Vue.. Then restart all services wamp.. (ok)
When stopping & (re)starting Vue & Wamp & shutting browser off..
**First restarting Wamp, then Vue, then browser.. (nok)
**First start Wamp, then Vue, then browser.. (ok)
**First start Vue, then restart Wamp, then browser (ok)
**First start Vue, then start Wamp, then browser (nok)
When shutting down computer
**First start up Vue, then Wamp, then browser (nok)
**First start up Wamp, then Vue, then browser (nok)

Answer 1

Root Cause & Solution
Important thing helping me in finding the solution was realising that the Console was giving the wrong error (CORS). The error log in CakePHP was a lot clearer. This one gave an error Error: [PDOException] SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'name' cannot be null (Cake error.log). So the data written to database could not be saved to the database.. The error was in handling the POST data on the Cake Backend.
The solution of the problem was to first perform the request data check before making the save.. if($data){}
Thank you -ndm- for the in detail explanation
The resulting error can/will (depending on your PHP installation's output_buffering setting) immediately produce output, in which case PHP cannot send any headers anymore, ie no CORS realated headers that would be required for CORS request to work can be sent. Depending on the exact error message and the additional context that is attached to it (stacktrace etc), the output buffer might not overflow on every single request (a single byte can already make the difference), hence that kind of unrealiable behavior.