Vue не возвращает данные при использовании API

23.12.2019 07:33:47 Просмотров 23 Источник

Я создал свой собственный backend api, когда я тестирую api на chrome, он работает правильно, но когда я использую api с помощью axios, он не возвращает никаких данных. Я использую vue.

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

ответ:

{ "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": {} }

как вы можете видеть, данные пусты, но когда я пытаюсь использовать какой-то публичный api, такой как JSONPlaceholder, он отлично работает.

Это формат мой формат JSON API-интерфейс:

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

EDIT (я нашел проблему)

Всякий раз когда пользователь делает запрос API я проверяю правильность сеанса

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
   }

Поэтому, когда я использую API непосредственно в строке поиска браузера, он работает, потому что он обнаруживает сеанс(cookie), но когда я использую его на Vue/axios, он не обнаруживает cookie, и это дает мне эту ошибку:

http: named cookie not present
exit status 1

Когда я создаю сеанс, я устанавливаю Path: "/", поэтому файл cookie сеанса также генерируется на моей странице Vue, даже если мой сервер и внешний интерфейс имеют разные порты. Итак, как я могу заставить сервер обнаружить мой сессионный файл cookie на моей странице Vue?

У вопроса есть решение -

https://stackoverflow.com/questions/59458571/vue-not-returning-data-when-consuming-api#comment105101925_59458571

Что вы подразумеваете под тестированием API в Chrome? Используйте почтальон/почтальон/бессонница, чтобы протестировать API. Если вы можете получить данные от JSONPlaceholder, это означает, что проблема, скорее всего, связана с вашим API.

Источник

Ответы - Vue не возвращает данные при использовании API / Vue not returning data when consuming API

mutiemule

23.12.2019 10:32:06

Я подозреваю, что проблема может быть с вашим API.

Тест API на почтальон / почтальон / бессонница , чтобы увидеть ответ. Если API возвращает данные о инструменте тестирования API, он должен хорошо работать при использовании в axios.

Смотрите ниже пример:

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>

Источник