Невозможно получить данные из API (ресурс заблокирован клиентом) в Vuex - PullRequest
Новая
       28

Невозможно получить данные из API (ресурс заблокирован клиентом) в Vuex

0 голосов
/ 18 апреля 2019

Я пытаюсь получить некоторые данные из моего API, используя vuex + axios, но это действие вызывает «сетевую ошибку» (ERR_BLOCKED_BY_CLIENT).

, когда я использовал json-сервер, он работает нормально, но он не работает с моим API даже с 'Allow-Access-Control-Origin': '*'

действия 

const actions = {
    async fetchSearch({ commit, state }) {
        let res
        try {
            res = await axios(`http://localhost:8000/api/advertisements/search?column=title&per_page=${state.params.per_page}&search_input=${state.params.query.toLowerCase()}&page=${state.params.page}`, {
                method: 'GET',
                mode: 'no-cors',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
        } catch(err) {
            console.log(err)
        }
        commit('clearProducts')
        commit('setProducts', res.data)
    },

    setGlobalParams({ commit }, obj) {
        commit('clearParams')
        commit('setParams', obj)
    }
}

компонент 

<script>
/* Vuex import */
import { mapActions } from 'vuex'

export default {
    name: 'base-search-component',
    data() {
        return {
            query_obj: {
                page: 1,
                per_page: 8,
                query: ''
            }
        }
    },
    methods: {
        ...mapActions([
            'fetchSearch',
            'setGlobalParams'
        ]),
        fetchData() {
            if (this.query_obj.query === '') {
                return
            } else {
                this.setGlobalParams(this.query_obj)
                this.fetchSearch()
                this.$router.push({ name: 'search', params: { query_obj: this.query_obj } })
            }
        }
    }
}
</script>

1 Ответ

0 голосов
/ 19 апреля 2019

Если проблема с корсом была решена правильно, причина, по которой вы не можете получить доступ к данным, заключается в том, что они устанавливаются до разрешения обещания axios.

Измените: 

async fetchSearch({ commit, state }) {
    let res
    try {
        res = await axios(`http://localhost:8000/api/advertisements/search?column=title&per_page=${state.params.per_page}&search_input=${state.params.query.toLowerCase()}&page=${state.params.page}`, {
            method: 'GET',
            mode: 'no-cors',
            headers: {
                'Content-Type': 'application/json'
            }
        })
    } catch(err) {
        console.log(err)
    }
    commit('clearProducts')
    commit('setProducts', res.data)
}

на:

async fetchSearch({ commit, state }) {
    await axios(`http://localhost:8000/api/advertisements/search?column=title&per_page=${state.params.per_page}&search_input=${state.params.query.toLowerCase()}&page=${state.params.page}`, {
        method: 'GET',
        mode: 'no-cors',
        headers: {
            'Content-Type': 'application/json'
        }
    }).then(function (response) {
        commit('clearProducts')
        commit('setProducts', response.data)
    }).catch(err) {
        console.log(err)
    }
}

Далее вам следует использовать mapState.Предполагая, что setProducts устанавливает объект состояния, например, продукты, это будет выглядеть так: 

<script>
/* Vuex import */
import { mapState, mapActions } from 'vuex'

export default {
    name: 'base-search-component',
    data() {
        return {
            query_obj: {
                page: 1,
                per_page: 8,
                query: ''
            }
        }
    },
    computed: {
        mapState([
            'products'
        ])
    },
    methods: {
        ...mapActions([
            'fetchSearch',
            'setGlobalParams'
        ]),
        fetchData() {
            if (this.query_obj.query === '') {
                return
            } else {
                this.setGlobalParams(this.query_obj)
                this.fetchSearch()
                this.$router.push({ name: 'search', params: { query_obj: this.query_obj } })
            }
        }
    }
}
</script>

Теперь вы можете ссылаться на this.products в JS или на продукты в вашем шаблоне.

...