please i have this probleme when i try to get or post or delete data from a local server (Laravel) it's work fine with json fake server but when i use local server i get this error :
Access to fetch at 'http://127.0.0.1:8000/api/eleves' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
this my javascript code
//aficher les etudients
const url = 'http://127.0.0.1:8000/api/eleves' ;
const afficherEtudiants =(data) => {
for (var etudiants in data) {
resultat += `
<tbody>
<tr >
<td>${data[etudiants].id}</td>
<td class="nomPrenom" >${data[etudiants].Nom}</td>
<td class="niveau">${data[etudiants].Niveau}</td>
<td class="dateNaissance">${data[etudiants].DateNaissance}</td>
<td class="codeMassar">${data[etudiants].CodeMassar}</td>
<td class="imageEtu"><img class="rounded imageEtu" width="80" height="80" src="${data[etudiants].Image}" alt=""></td>
<td><button class="btnModifier btn btn-primary btn-sm" id="modifier-etudient" >Modifier</button></td>
<td data-id=${data[etudiants].id}><button type="button" class="btn btn-danger btn-sm" id="supprimer-etudient">Supprimer</button></td>
</tr>
</tbody>
` ;
};
etudiantList.innerHTML = resultat ;
}
//afficher les étudiants
fetch(url)
.then(res => res.json())
.then(data => afficherEtudiants(data))
//Delete
etudiantList.addEventListener('click', (e)=>{
e.preventDefault() ;
let suppButtonClick = e.target.id == 'supprimer-etudient' ;
let modButtonClick = e.target.id == 'modifier-etudient' ;
let id = e.target.parentElement.dataset.id;
//supprimer un etudiant
if(suppButtonClick){
fetch(`${url}/${id}`,{
method:'DELETE',
headers:{
'Content-Type' : 'application/json' ,
"Accept": "application/json, text-plain, */*",
"X-Requested-With": "XMLHttpRequest",
},
})
.then(res => res.json() )
.then(() => location.reload())
}
if(modButtonClick) {
const parent = e.target.parentElement.parentElement ;
let nomCont = parent.querySelector('.nomPrenom').textContent ;
let niveauCont = parent.querySelector('.niveau').textContent ;
let naissanceCont = parent.querySelector('.dateNaissance').textContent ;
let massarCont = parent.querySelector('.codeMassar').textContent ;
let imageCont = parent.querySelector('.imageEtu').textContent ;
NomValeur.value = nomCont ;
NiveauValeur.value = niveauCont ;
NaissanceValeur.value = naissanceCont ;
MassarValeur.value = massarCont ;
ImageValeur.value = imageCont ;
}
// mise a jour les info de etudiant
btnSubmit.addEventListener('click' , (e) => {
e.preventDefault();
fetch(`${url}/${id}`,{
method:'PATCH',
headers:{
'Content-Type' : 'application/json' ,
"Accept": "application/json, text-plain, */*"
},
body:JSON.stringify({
Nom:NomValeur.value,
Niveau:NiveauValeur.value,
DateNaissance:NaissanceValeur.value,
CodeMassar:MassarValeur.value,
Image:ImageValeur.value
})
})
.then(res => res.json() )
.then(() => location.reload())
})
} ) ;
//ajouter etudiant
ajouterEtudiant.addEventListener('submit', (e) =>{
e.preventDefault() ;
fetch(url,{
method:'POST',
headers:{
"Content-Type": "application/json",
"Accept": "application/json, text-plain, */*",
'Content-Type': 'multipart/form-data;',
'Access-Control-Allow-Origin':'*'
},
body:JSON.stringify({
Nom:NomValeur.value,
Niveau:NiveauValeur.value,
DateNaissance:NaissanceValeur.value,
CodeMassar:MassarValeur.value,
Image:ImageValeur.value
})
})
.then(res => res.json())
.then(data => {
const dataArr =[] ;
dataArr.push(data) ;
afficherEtudiants(data);
})
})
