Nuxtjs Axios 在 Vuex 模块 CORS 错误
Nuxtjs Axios in Vuex Module CORS error
我正在使用 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)
})
}
还是没有拿到手。这是抛出到控制台的错误消息。
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 的网络控制台中看到的那样。
好的,我似乎已经解决了这个问题。
在 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
我正在使用 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)
})
}
还是没有拿到手。这是抛出到控制台的错误消息。
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 的网络控制台中看到的那样。
好的,我似乎已经解决了这个问题。
在 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