Nuxt.js Axios Cookie-Sending Problem, So LocalStorage
My head feels like it's about to explode.. This is about the problems with sending cookies via axios in nuxt.js. My server setup is nuxt.js + laravel api. It's
GGAMI·
My head feels like it's about to explode..
This is about the problems with sending cookies via axios in nuxt.js.
My server setup is nuxt.js + laravel api.
It's JWT-based, and I use the nuxt auth module.
I wanted to use cookies to remember settings on a particular page.
But first, CORS on the server side was already configured for the API.
When asyncData is called on a page refresh, the cookie values are sent correctly at first. This was because the nuxt-auth module checks whether the JWT is still valid and sends all the cookie values it has.
However, in asyncData called through page navigation, the cookie values were not passed along via axios.
I searched around, but couldn't find much; this is what I concluded.
Turn on the credentials: true option in axios, and also set 'supportsCredentials' => false, in CORS.
Okay, so far so good. But here's the next problem. I used the nuxt cookie module, but axios now filters the cookies itself when sending them, depending on the domain where they were created.
That is, if the axios URL is api.domain, it only sends cookie values for .domain.
So, whenever creating a cookie, I had to enter .domain in the domain option.
(I wasn't too happy about this... because I had to enter the domain manually wherever I created a cookie, and when I handled it with env, there was an issue where the leading . wouldn't be added,)
Then, after looking into it, I came across something called LocalStorage.
It turned out that people often store all kinds of things, like options and things that need to be stored in the browser, in local storage.
So, rather than storing cookies one by one and proceeding that way, since they weren't important anyway, needed to be stored only in the browser, and when receiving certain data, the browser needed to send the option values it wanted to the server,
I decided not to use cookies.
I thought I'd store them in Local Storage and, when making a request to the server, send the data in the header, like an Auth bearer.. If that doesn't work in the header.. maybe I'll have to use POST.. Hmm..
Supplemental note) Wow.. It wasn't working at all, so I went and got some sleep... To add a quick update, Local storage doesn't work.
Because it's SSR, Local storage can't be used during the server-rendering stage when the page is refreshed.
After looking into it a bit, they say local storage can't be used before mounted.
Which makes sense, since it's browser data..
In that case, I guess there's no choice but to use cookies..
But since there were things to configure, like the domain and so on, I decided to just store the data in a cookie and include the cookie data in the header when sending it..
I'm not sure if this is the right way, but it feels like I've spent too much time on this, so I'll just patch it this way for now and move on...
Honestly, this is my first time with Vue.js and Nuxt.js, but are there even any nuxt.js developers in South Korea? There are no posts, no information, and it seems like it's used even more in Japan... I got a lot of help from reading articles written in Japanese..
As a result, what I realized was that I thought Japan's IT scene was not as good as ours, but it seemed like there were many places with high-quality websites (?).
