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