Xmlhttprequest cannot load no Vue js

Asked

Viewed 320 times

0

My app.See

<template>
    <div id="app">
        <h1>{{ titulo }}</h1>
        <li v-for="usuario of usuarios">

        </li>
    </div>
</template>

<script>
export default {
    name: 'app',
    data() {
        return {

    },
    created() {
        //componente
        let promisse =  this.$http.get('http://swapi.co/api/planets/1/', { headers: { 'Access-Control-Allow-Origin': '*' }});

        console.log(promisse);
        promisse.then(res => alert(res));

    }
}
</script>

My main.js

import Vue from 'vue'
import App from './App.vue'
//importando o vue-rsource
import VueResource from 'vue-resource';

//Usando globalmente o vue-resource
Vue.use(VueResource);

new Vue({
  el: '#app',
  render: h => h(App)
})

You’re making that mistake

Xmlhttprequest cannot load http://swapi.co/api/planets/1/. Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight Response. localhost/:1 Uncaught (in Promise) Response {url: "http://swapi.co/api/planets/1/", ok: false, status: 0, statusText: "", headers: Headers, ...}

javascript api rest http vue.js

1 answer

1


This type of error occurs due to CORS (Cross-origin Resource sharing). Browsers usually make a request is sent of type OPTIONS and the server will respond if the type of request you want to make (in your case a GET) is released or not to source (your application).

If the API you are consuming is yours, you will need to configure the CORS in it, setting your application as part of the set that will be able to access the resources of it.

If you have more questions, search a little more about CORS and its settings (vary from platform to platform only in the implementation, the conceptual is the same).

Browser other questions tagged javascript api rest http vue.js

You are not signed in. Login or sign up in order to post.