Question

我正在尝试使用vuex + axios从我的API中获取一些数据，但是该操作给了我一个“网络错误”（ERR_BLOCKED_BY_CLIENT）。

当我使用json-server时，它工作正常，但是即使使用'Allow-Access-Control-Origin'：'*'

，它也无法与我的API一起使用

动作

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>

Answer 1

假定您的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设置了一个类似于产品的状态对象，如下所示：

<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中的this.products或模板中的产品。

Answer 2

为了这个问题的未来访问者的完整性，请确保您的浏览器没有阻止请求。我在使用 Brave 时遇到了这种情况。

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

2 个答案: