URL Blocked by CORS policy

Mesmo seguindo os passos do vídeo, estou tendo problema de CORS ao deletar uma foto. Qual a solução para isso?

Segue o console:

localhost/:1 Access to XMLHttpRequest at 'http://localhost:3000/v1/SaN4URkxvt5ewWeT' 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.
Home.vue?4de6:70 Response {url: "http://localhost:3000/v1/SaN4URkxvt5ewWeT", ok: false, status: 0, statusText: "", headers: Headers, …}
main.js?attr=IpDViMYsrVbPZk8d5rbIEc57M7TSTr369i8f1uPSG3yKGRkK0sJONA6CitzviPug:1063 DELETE http://localhost:3000/v1/SaN4URkxvt5ewWeT net::ERR_FAILED
window.XMLHttpRequest.send @ main.js?attr=IpDViMYsrVbPZk8d5rbIEc57M7TSTr369i8f1uPSG3yKGRkK0sJONA6CitzviPug:1063
eval @ vue-resource.esm.js?f3ef:1082
PromiseObj @ vue-resource.esm.js?f3ef:196
xhrClient @ vue-resource.esm.js?f3ef:1019
sendRequest @ vue-resource.esm.js?f3ef:1180
Client @ vue-resource.esm.js?f3ef:1143
Http @ vue-resource.esm.js?f3ef:1385
Http.<computed> @ vue-resource.esm.js?f3ef:1416
remove @ Home.vue?4de6:68
botaoAtivado @ Home.vue?bcda:69
invokeWithErrorHandling @ vue.esm.js?efeb:1863
invoker @ vue.esm.js?efeb:2188
invokeWithErrorHandling @ vue.esm.js?efeb:1863
Vue.$emit @ vue.esm.js?efeb:3897
disparaAcao @ Botao.vue?ebfb:27
click @ Botao.vue?c204:13
invokeWithErrorHandling @ vue.esm.js?efeb:1863
invoker @ vue.esm.js?efeb:2188
original._wrapper @ vue.esm.js?efeb:7565

Segue o código:

<template>
  <div>
    <h1 class="centralizado">{{ titulo }}</h1>

    <p v-show="mensagem" class="centralizado">{{ mensagem }}</p>
    <input
      type="search"
      class="filtro"
      @input="filtro = $event.target.value"
      placeholder="filtre por parte do título"
    />

    <ul class="lista-fotos">
      <li class="lista-fotos-item" v-for="foto in fotosComFiltro" :key="foto.url">
        <meu-painel :titulo="foto.titulo">
          <imagem-responsiva
            v-meu-transform:scale.animate="1.2"
            :url="foto.url"
            :titulo="foto.titulo"
          />
          <meu-botao
            tipo="button"
            rotulo="REMOVER"
            @botaoAtivado="remove(foto)"
            :confirmacao="false"
            estilo="perigo"
          />
        </meu-painel>
      </li>
    </ul>
  </div>
</template>

<script>
import Painel from '../shared/painel/Painel.vue';
import ImagemResponsiva from '../shared/imagem-responsiva/ImagemResponsiva.vue';
import Botao from '../shared/botao/Botao.vue';

export default {
  components: {
    'meu-painel': Painel,
    'imagem-responsiva': ImagemResponsiva,
    'meu-botao': Botao
  },

  data() {
    return {
      titulo: 'Alurapic',
      fotos: [],
      filtro: '',
      mensagem: ''
    };
  },

  computed: {
    fotosComFiltro() {
      if (this.filtro) {
        let exp = new RegExp(this.filtro.trim(), 'i');
        return this.fotos.filter(foto => exp.test(foto.titulo));
      } else {
        return this.fotos;
      }
    }
  },

  methods: {
    remove(foto) {
      this.$http.delete(`http://localhost:3000/v1/${foto._id}`)
      .then(() => this.mensagem = `Foto "${foto.titulo}" removida com sucesso`, err => {
        console.log(err);
        this.mensagem = 'Não foi possível remover a foto';
      });
    }
  },

  created() {
    this.$http
      .get('http://localhost:3000/v1/fotos')
      .then(res => res.json())
      .then(fotos => (this.fotos = fotos), err => console.log(err));
  }
};
</script>

<style>
.centralizado {
  text-align: center;
}

.lista-fotos {
  list-style: none;
}

.lista-fotos .lista-fotos-item {
  display: inline-block;
}

.filtro {
  display: block;
  width: 100%;
}
</style>