Estoy haciendo una petición POST de una API con axios
desde vuejs
, cuando consumí esta API desde el servidor me da una respuesta con status code, pero al intentar consumirla desde el componente vue me lanza un error:
Solicitud de origen cruzado bloqueada: La misma política de origen no permite la lectura de recursos remotos en https://... (Razón: Solicitud CORS sin éxito).
Creo que mi problema viene desde el body del post request, ¿cómo puedo configurar este correctamente?
Este es el código (algo robusto):
<template>
<div id="app">
<h1 class="title">Login</h1>
<button v-on:click="fetch">Entrar</button>
</div>
</template>
<script>
import axios from 'axios'
const username = '...'
const pass = '...'
export default {
name: 'App',
methods: {
fetch() {
let data= ''
var token = ''
axios
.get('/webservice.php?operation=getchallenge&username=' + username + '&password=' + pass)
.then(res => {
console.log(res.data);
var getToken = JSON.parse(data)
this.token = getToken.result.token;
console.log(res);
}).catch(e => console.log(e.response))
axios
.post('/webservice.php', {
headers: {
'Content-Type': ['application/x-www-form-urlencoded', 'application/x-www-form-urlencoded']
}, body: {
'operation': 'login',
'username': username,
'accessKey': pass,
'token': token
}
})
.then(response => {console.log(response)
}).catch(e => console.log(e))
}
}
};
</script>
<style lang="scss" scoped>
</style>