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?

It will be your api blocking the request. What is the cors error you get in the console? What type of api are you using? — Andrew1325, Apr 01 '19 at 01:56
Hi @Andrew1325 , it's a **RESTful** API and I am getting the **No 'Access-Control-Allow-Origin' header** error. — Manu, Apr 01 '19 at 08:00
@Andrew1325 , yes, Nuxt.js is built on top of Node & Express — Manu, Apr 02 '19 at 07:43
@Manu No, Nuxt is built on top of Vue.js and apparently Node. Express is just an integration. — Anbuselvan Rocky, Jul 30 '19 at 14:48

Daniel · Accepted Answer · 2019-04-03T17:58:26.013

26

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

edited Apr 03 '19 at 17:58

answered Apr 02 '19 at 18:48

Daniel

34,125
17
102
150

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=public&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.``` – Manu Apr 03 '19 at 15:45
1

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` – Daniel Apr 03 '19 at 17:57
It works fine if I paste the link ```https://api.example.com/2/photos?&sign=true&photo-host=public&event_id=testID``` in my browser so I am pretty sure it's nothing wrong with anything in my ```Axios.get()``` – Manu Apr 03 '19 at 21:47
9

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. – Daniel Apr 03 '19 at 22:03
Is this possible to have this working on a Netlify static site? – Firzok Nadeem Dec 02 '20 at 17:37
@FirzokNadeem I don't think so. This is for development purposes only. – Daniel Dec 02 '20 at 18:28
@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 May 12 '22 at 12:30
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](https://stackoverflow.com/a/72211930/8816585). 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). – kissu May 15 '22 at 08:27

CORS blocking client request in Nuxt.js

1 Answers1

Linked