Question

提出客户请求时遇到问题。

我已经按照Nuxt.js和Axios上的文档进行操作，但是我似乎仍然无法正常运行。也许我缺少了一些东西。

我的Vue组件调用 vuex动作：

methods: {
  open() {
    this.$store.dispatch('events/getEventAlbum');
  }
}

vuex 中的操作：

export const actions = {
  async getEventAlbum(store) {
    console.log('album action');
    const response = await Axios.get(url + '/photos?&sign=' +   isSigned + '&photo-host=' + photoHost);
    store.commit('storeEventAlbum', response.data.results);
  }
};

还有我的 nuxt.js.config

modules: [
  '@nuxtjs/axios',
  '@nuxtjs/proxy'
],

axios: {
  proxy: true
},

proxy: {
  '/api/': { target: 'https://api.example.com/', pathRewrite: {'^/api/': ''} }
}

有人可以提供帮助吗？

Answer 1

我相信@ andrew1325试图指出的问题是 API提供程序需要启用CORS，而不仅仅是您的服务器，而无需更改代理中的标头，传递相同的标头，目前阻止访问。

在我看来，您只是想念changeOrigin

请尝试以下配置：

modules: [
  '@nuxtjs/axios',
  '@nuxtjs/proxy'
],

axios: {
  proxy: true
},

proxy: {
  '/api/': { target: 'https://api.example.com/', pathRewrite: {'^/api/': ''}, changeOrigin: true }
}

还要确保您的前端API网址指向您的代理请求/api

CORS阻止Nuxt.js中的客户端请求

1 个答案: