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

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 正在设置一个像 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 中引用 this.products 或在模板中引用 products。