CORS blocking client request in Nuxt.js

Question

I am having issues when making a client request.

I have followed the documentation on Nuxt.js and Axios but I still can't seem to get it working. Maybe I am missing something..

My Vue component calling the vuex action:

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

The action in 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);
  }
};

And my nuxt.js.config

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

axios: {
  proxy: true
},

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

Anybody who can help?

Answer 1

I believe the issue that @andrew1325 is trying to point out is that the API provider needs to have the CORS enabled, not just your server, without changing the headers in your proxy, you're passing the same headers, which at the moment prevent access.

It seems to me that you're only missing changeOrigin

please try the following config:

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

axios: {
  proxy: true
},

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

also make sure that your front-end API url is pointing to your proxied request /api