0

Sou novo usando o Vue.js e estou com um problema para pegar o retorno de uma api. Meu código é o seguinte:

div id="app">
    <ul>
        <li v-for="album in albuns">
            {{albuns.Id }} {{albuns.Nome}}
        </li>
    </ul>
</div>
<script src="https://unpkg.com/vue"></script>

<script>
const app = new Vue({
    el: '#app',
    data: {
        albuns: []
    },
    created() {
        fetch('http://localhost:59385/Album/listaralbuns')
            .then(Response => Response.json())
            .then(json => {
                this.albuns = json.albuns
            })
    }
})
</script>

Api

[HttpGet]
[Route("album/listaralbuns")]
public HttpResponseMessage ListarAlbuns(Album album)
{
    var albumService = new AlbumService();
    var listaAlbuns = albumService.obterAlbum();

    return Request.CreateResponse(HttpStatusCode.OK, 
        listaAlbuns, 
        Configuration.Formatters.JsonFormatter);
}

A api traz os dados corretos debugando pelo visual studio, mas no retorno os seguintes erros:

Access to fetch at 'http://localhost:59385/Album/listaralbuns' from origin 'http://localhost:59841' 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.

Teste:1 Uncaught (in promise) TypeError: Failed to fetch

3
  • Você está com problema de cors na sua api, como você não postou nenhuma informação da api não tem ajudar. O lado do vue parece estar ok mas primeiro precisa arrumar o lado da api
    – rnd_rss
    Commented 31/10/2019 às 16:54
  • olá, eu editei a pergunta colocando também a api do listar, se puder dar uma olhada por favor Commented 6/11/2019 às 2:41
  • Acho que não fui muito claro, você esta com problema no lado do servidor, quando você faz uma requisição o browser antes de enviar a sua requisição faz uma outra pedindo para o servidor quais "operações" estão liberadas para ele fazer, se a "operação" não estiver liberada o browser vai bloquear a sua chamada, procure no google como liberar o CORS na sua aplicação
    – rnd_rss
    Commented 6/11/2019 às 17:54

1 Resposta 1

1

Os códigos tanto Vue quanto da API estão corretas, o problema que está quando você conecta os dois, o nome disso é CORS.

Por motivos de segurança não é possível fazer requisições de um domínio para outro domínio. Para burlar isso você deve informar que sua API permite esse acesso externo, nessa página da microsoft eles mostram detalhadamente como fazer isso com C#.

Basicamente você só precisa adicionar uma linha antes da declaração do seu método para funcionar.

...
[EnableCors(origins: "http://www.example.com", headers: "*", methods: "*")]
public HttpResponseMessage ListarAlbuns(Album album){
...
1
  • Olá desculpe a demora em responder, era o cors mesmo, muito obrigado Commented 13/03/2020 às 2:24

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .