My API is built with Laravel and for the front-end, I am using Vue.js with Nuxt.js.
I have successfully installed the CORS policy package, which is working well with all my other resources. However, I encountered an error for one of my features:
Access to XMLHttpRequest at 'http://myapp.test/api/bilan/storestatus' from origin 'http://localhost:3000'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
POST http://myapp.test/api/bilan/storestatus net::ERR_FAILED
Despite following the correct procedures, such as setting up the headers properly, the error still persists. Below is a snippet of my code:
<el-switch v-model="status.status" @change="storeStatus">
</el-switch>
data() {
status: { status: 0 }
}
async storeStatus() {
try {
await axios.post('bilan/storestatus', this.status)
.then( () => {
this.$message({
message: this.$t('status.updated'),
type: 'success'
})
})
.catch(error => {
console.log(error);
})
} catch (e) {
console.log(e)
}
},
If you have any insights or suggestions regarding why this particular feature is causing issues while everything else is functioning correctly, please let me know. It's puzzling as to why this is happening.