Request wierd behaviour in Nuxt.js

Question

I have a weird issue, maybe it's caused by me, personally I suspect the server-side code, but I want to see if there is something I am missing, so my goal here is not to change the server accordingly I can do that, but I want to understand what's going on under the hood.. So I have a Nuxt app which will need to consume 2 api's, and I decided to test out how would that work out in the early stage, so I tried few axios requests using the @nuxtjs/axios module at first it worked fine, but now, what I see really riddle me.

This is how the request looks:

async fetchData() {
      const data = await this.$axios.$get(
        process.env.cmBaseUrl + '/api/products',
        {
          auth: {
            username: process.env.cmUsername,
            password: process.env.cmPassword
          }
        }
      )
      console.log(data)
    }

The server is using Basic authorization that's why I use the auth property, but that was working earlier, I also tried to call from nuxtServerInit (in store), asyncData (in pages), normal methods and in the layout, to no avail (as I said it worked earlier both in store and pages).

But what is really weird in this case, is that in the console where I have npm run dev running, I can see the response from that request when I reload the page, and the created() hook run the fetchData() function.

But in the browser console, I see Network Error and the request stuck on OPTIONS (although it did pass before, with nothing changed on the server side it shouldn't be CORS related).

So my main concern is that I don't understand (and that's my fault I know) why does the request pass in node environment, but has a different behaviour in the browser, if it's indeed CORS related because of the browser request being stuck on OPTIONS and never make it to GET request, how come it passes node ?

score 1 · Accepted Answer · answered Nov 06 '19 at 11:29

From what I understand, you can see the response in command line, but you can't in browser and that is to be expected. CORS only happens in browser. Command line, Postman and stuff like that are not browser and you will not get CORS error in them. You need to set CORS policy in your backend app in order to be able to get the response in your browser.

Request wierd behaviour in Nuxt.js

1 Answers1