Vue not returning data when consuming API

Question

I created my own backend api, when I test the api on chrome it works correctly but when I consume the api using axios it doesn't return any data. I'm using vue.

axios.get('http://192.168.149.12:8888/api/user/5120')
            .then(res => {
                this.data = res; 
            }) 
            .catch(err => {
                this.data = err;
            });

response:

{ "data": "", "status": 200, "statusText": "OK", "headers": { "content-length": "0" }, "config": { "url": "http://192.168.149.12:8888/api/user/5120", "method": "get", "headers": { "Accept": "application/json, text/plain, */*" }, "transformRequest": [ null ], "transformResponse": [ null ], "timeout": 0, "xsrfCookieName": "XSRF-TOKEN", "xsrfHeaderName": "X-XSRF-TOKEN", "maxContentLength": -1 }, "request": {} }

as you can see the data is empty, but when I try to use some public api such as JSONPlaceholder it works perfectly.

This is the format of my json api:

{
"user": {
  "example": false,
  "example1": "/zTxHf9iIOCqRbxvl8W5QYKrsMLq.jpg"
 }
}

EDIT (I found the problem)

Whenever the user make an API request I check if the session is valid

userCookie, err := r.Cookie("session-id")
    if err != nil {
        fmt.Println(err)
        if strings.HasPrefix(r.URL.Path, "/login") {
            Login(w, r, db) //login and create session
        }
   } else {
     //Authenticate Session Then if Valid proceed to my APIs
   }

So when I consume an API directly on the browser's search bar it works because it detects the session(cookie), but when I consume it on Vue/axios it doesn't detect the cookie and it gives me this error:

http: named cookie not present
exit status 1

When I create a session I set the cookie Path: "/" so the session cookie is also generated to my Vue page even though my server and front end have different ports. So how can I make the server detect my session cookie on my Vue page?

What do you mean by when you test the API on Chrome? Use Postman/Postwoman/Insomnia to test the API. If you're able to get data from JSONPlaceholder, it means the issue is with your API most likely. — mutiemule

mutiemule mutiemule · Accepted Answer · 2019-12-23T19:32:06

I suspect the issue could be with your API.

Test the API on Postman / Postwoman / Insomnia to see the response. If the API returns data on the API testing tool, it should function well when consumed on axios.

See below example:

var app = new Vue({
       el: '#app',

       data: {
        response: '',
       },     
 
       methods:{
        runApi:function(){
            axios.get('https://jsonplaceholder.typicode.com/todos/1').then(response=>{
                this.response = response.data;
                console.log(this.response);
                
            }).catch(function(error){
                console.log('error : ',error);
            })  
        }
       },

       mounted:function(){
           this.runApi();        
        }
    })

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>


<div id="app">
<p>
{{ response }}
</p>
</div>

Vue not returning data when consuming API

1 Answers