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?

Solution

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

Comments

[Manu]

Hi Daniel, changeOrigin did not make much of a difference. Still getting the same error.. Access to XMLHttpRequest at 'https://api.example.com/2/photos?&sign=true&photo-host=publ‌​ic&event_id=testID' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

[Daniel]

then you're not hitting the proxy at all, so it doesn't matter what you set up through your config, because you're bypassing it completely. Can you show the code for url (const response = await Axios.get(url + ...)? You probably just need to make that /api

[Manu]

It works fine if I paste the link https://api.example.com/2/photos?&sign=true&photo-host=publi‌​c&event_id=testID in my browser so I am pretty sure it's nothing wrong with anything in my Axios.get()

[Daniel]

It's the browsers' security policy if you paste it in as a link, CORS is not an issue. you need to use https://api.example.com/2/ as your proxy target and use /api within your app. That's what the proxy is for, it routes the traffic through a server rather than the browser getting it.

[Firzok Nadeem]

Is this possible to have this working on a Netlify static site?

[Daniel]

@FirzokNadeem I don't think so. This is for development purposes only.

[kissu]

@FirzokNadeem no, because Netlify does not provide a running Node.js server (as of today). And it's not a good solution for production anyway.

[kissu]

Even if the accepted answer works, keep in mind that it's more of a band aid than an actual solution. For a real answer, please check this one. TLDR being that you should ask the backend team to enable it or to whitelist your localhost into an admin dashboard. This will bring the great benefit of not having to rely on SSR (if your project could run on SSG without the proxy module).