ajax - Nuxtjs Axios 在 Vuex 模块 CORS 错误

Question

我正在使用 Nuxtjs 和内置的 Vuex 模块以及 Nuxtjs 的官方 axios。我正在尝试从我的本地服务器获取，但它总是抛出 CORS 错误。

所以我对 Github 的公共(public)端点进行了 API 调用，但没有成功，只在我的控制台中收到 CORS 错误。

我正在使用商店操作在组件创建生命周期中启动对服务器的 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)
      })
  }

仍然没有运气得到它。这是一条抛出到控制台的错误消息。


无法加载 https://api.github.com/users/kaungmyatlwin:对预检请求的响应未通过访问控制检查:响应中“Access-Control-Allow-Origin” header 的值不能是当请求的凭证模式为“include”时使用通配符“*”。因此不允许访问源“http://localhost:3000”。 XMLHttpRequest 发起的请求的凭据模式由 withCredentials 属性控制。


我这里做错了什么？还是存在async/await的错误？

更新:奇怪的是，网络调用实际上发出并从服务器获取数据，这可以在 Chrome 的网络控制台中看到。

Answer 1

好吧，我似乎已经想通了这个问题。

在 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