代码之家 › 专栏 › 技术社区 › alejandrohtadinom

无法从Vuex中的API(客户端阻止的资源)获取数据

vue-router vuex axios vue.js laravel

alejandrohtadinom · 技术社区 · 5 年前

我正在尝试使用vuex+axios从我的API中获取一些数据,但该操作会给我一个“网络错误”(ERR_BLOCKED_BY_CLIENT)。

当我使用json服务器时,它工作得很好,但是即使使用 '允许访问控制源':'*'

行动

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>

0 回复 | 直到 5 年前

Tim Wickstrom 5 年前

假设您的cors问题已得到正确解决,则无法访问数据的原因是在解决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正在设置类似products的状态对象,则如下所示:

<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>

现在你可以参考本产品在JS或模板中的产品中。