CORS Blocked when POST data to Lumen using fetch() Vanilla JS

Questions
1

I create new project using Framework7+cordova. I need to POST data to my Lumen Project. It’s always error like this:

image
image807×132 13.8 KB

my code on component Framework7 is like this:

var taskID = $$(this).data(‘task’);
var task = {
“task”: taskID
};
let fetchRes = fetch(“http://192.168.1.157:8000/do-task”,{
method: ‘POST’,
body: JSON.stringify(task)
});
fetchRes.then(response => {
if (!response.ok) {
throw new Error(‘Network error’);
}
return response.json();
})
.then(data => {
console.log(“success”);
})
.catch(error => {
if (error instanceof TypeError && error.message.includes(‘API key’)) {
console.error(‘Invalid API key:’, error);
} else {
console.error(‘There was a problem with the Fetch operation:’, error);
}
});

But i can getting data from my Lumen Project using fetch().

Please help, i was trying any instruction that provided on Google, but still failed.

2

Since you are using chrome to send the post request, you have to make sure that the server receiving the request has a header to allow all origins

3

image
request header was like this

4

on my lumen, i also have add this middleware

image
image913×449 20.5 KB

5

Probably this won’t help you, but I have it working(framework7 v8, android/ios app with capacitor) fetching from a remote db(PHP) with just these two headers:

header("Access-Control-Allow-Origin: *");
header('Content-Type: application/json');