vuejs2 - 在 Nuxt.js 中 CORS 阻塞客户端请求

Question

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

我遵循了 Nuxt.js 上的文档和 Axios但我似乎仍然无法让它工作。也许我错过了一些东西..

我的 Vue 组件调用了 vuex Action :

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，而不仅仅是您的服务器，在不更改代理中的 header 的情况下，您传递的是相同的 header ，目前阻止访问。

在我看来，你只是失踪了 changeOrigin
请尝试以下配置:

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

axios: {
  proxy: true
},

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

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