Rails API отвечает на запрос, но Axios не получает данные - PullRequest
Новая
       33

Rails API отвечает на запрос, но Axios не получает данные

0 голосов
/ 20 декабря 2018

У меня есть Rails 5.2.2 API, который обслуживает данные JSON на localhost: 3000 / v1 / Stories.Я пытаюсь настроить приложение Vuejs для использования его с Axios.Терминал rails показывает запрос и не выдает ошибок: 

Started GET "/v1/stories" for 127.0.0.1 at 2018-12-19 18:06:44 -0500
Processing by V1::StoriesController#index as HTML
  Story Load (0.8ms)  SELECT "stories".* FROM "stories"
  ↳ app/controllers/v1/stories_controller.rb:6
[active_model_serializers] Rendered ActiveModel::Serializer::CollectionSerializer with ActiveModelSerializers::Adapter::JsonApi (6.25ms)
Completed 200 OK in 10ms (Views: 8.7ms | ActiveRecord: 0.8ms)

MyIn vue app, у меня есть следующие соответствующие файлы:

Api.js получает базовое соединение: 

import axios from 'axios'

export default() => {
  return axios.create({
    baseURL: `http://localhost:3000/v1`
    headers: {
      'Accept': 'applicaton/json',
      'Content-Type': 'application/json'
    }
  })
}

StoriesService.js: 

import Api from '@/services/Api'

export default {
  fetchStories () {
    return Api().get('/stories')
  }
}

и в представлении (components / Stories.vue): 

<template>
  <div class="stories">
    <h1>Stories</h1>
    <div v-if="stories" class="table-wrap">
      <div v-for="story in stories" :key="story.id">
        <h3>Title: {{story.title}}</h3>
        <p>Summary: {{story.description}}</p>
      </div>
    </div>
    <div v-else>
       There are no stories... Let's add one now <br><br>
       <!-- <router-link v-bind:to="{ name: 'NewStory' }" class="add_story_link">Add Story</router-link> -->
    </div>
  </div>
</template>

<script>
import StoriesService from '@/services/StoriesService'
export default {
  data () {
    return {
      stories: []
    }
  },
  mounted () {
    this.getStories()
  },
  methods: {
    async getStories () {
      const response = await StoriesService.fetchStories()
      this.stories = response.data.stories
    }
  }
}

</script>

В приложении Rails cors.rb имеет вид: 

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*',
      :headers => :any,
      methods: %i(get post put patch delete options head)
  end
end

Я сделал предложенную настройку.Вот ответ от запроса GET к серверной части в.Он показывает поступающие данные, но по какой-то причине не отображается из цикла v-for.enter image description here

1 Ответ

0 голосов
/ 21 декабря 2018

Ваша конечная точка Rails API возвращает массив story , присвоенный свойству data, например, 

{
  "data":[...]
}

Объекту тела ответа присваивается response.data через Axios, так чтовы на самом деле хотите это 

this.stories = response.data.data
...