Estou na parte de centralizar o resource no FotoService.js e após fazer a implementação de lista com sucesso estou enfrentado problemas com CORS na requisição de delete. Qualquer ajuda agradeço!
Seguem os códigos:
main.js:
//código omitido
Vue.http.options.root = 'http://localhost:3000';
//código omitido
Home.vue:
<script>
//código omitido
import FotoService from '../../domain/foto/FotoService';
export default {
//código omitido
methods: {
remove(foto) {
this.service
.apaga(foto._id)
.then(
() => {
let indice = this.fotos.indexOf(foto);
this.fotos.splice(indice, 1);
this.mensagem = 'Foto removida com sucesso'
},
err => {
this.mensagem = 'Não foi possível remover a foto';
console.log(err);
}
)
}
},
created() {
this.service = new FotoService(this.$resource);
this.service
.lista()
.then(fotos => this.fotos = fotos, err => console.log(err));
}
}
</script>
//Código omitido
FotoService.js:
export default class FotoService {
constructor (resource) {
this._resource = resource('v1/fotos/{/id}');
}
lista () {
return this._resource
.query()
.then(res => res.json());
}
cadastra (foto){
}
apaga(id){
return this._resource.delete({ id });
}
}
Abaixo as mensagens de erro:
"Failed to load resource: the server responded with a status of 404 (Not Found)"
"Access to XMLHttpRequest at 'http://localhost:3000/v1/fotos//5oqIp6QBxoDhEvin' from origin 'http://localhost:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status."