Vuex模块中的Nuxtjs Axios CORS错误

nmpmafwu  于 2022-11-05  发布在  iOS
关注(0)|答案(1)|浏览(188)

我正在使用Nuxtjs和内置的Vuex模块沿着Nuxtjs的官方axios。我试图从我的本地服务器获取,它总是抛出CORS错误。
所以我对Github的公共端点进行了一个API调用,但没有成功,只在我的控制台中得到了CORS错误。
我正在使用Store动作在组件创建生命周期中启动对服务器 AJAX 调用。

// component.vue

created () {
   this.$store.dispatch('getGithubAPI')
}

// store action

  async getGithubAPI ({ commit, state }) {
    await this.$axios.$get('https://api.github.com/users/kaungmyatlwin', { headers: { 'Access-Control-Allow-Origin': '*' } })
      .then(resp => {
        console.log(resp.data)
      })
  }

仍然没有运气得到它。这里是一个错误消息,抛出控制台。
Failed to load https://api.github.com/users/kaungmyatlwin: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:3000' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
我在这里做错了什么?或者是一个驻留在async/await中的错误?
更新:奇怪的是,网络调用实际上出去,并从服务器获取数据,因为它可以在Chrome的网络控制台中看到。

2izufjch

2izufjch1#

还好我似乎已经想通了这个问题。
nuxt.config.js中,你必须把credentials: false放到允许CORS的通配符中。
我的axios配置在这里。

axios: {
    baseURL: 'https://api.github.com',
    proxyHeaders: false,
    credentials: false
  }

参考:https://github.com/nuxt-community/axios-module#credentials

相关问题