I've been facing a challenge in a Vue project where the request headers have become too large for our servers to handle, resulting in 413 error codes.
Using JWT bearer tokens, I can see that the token is included in the request as the Authentication header and also in the cookie under access_token.
So far, I have attempted to resolve this issue by utilizing https://www.npmjs.com/package/vue-cookies, removing the access_token cookie before each request, setting access_token=null before each request, but to no avail.
I have also experimented with axios interceptors in the hopes of removing the cookie before each request, but have encountered difficulties modifying or removing the cookie via the interceptor.
Is there a way to modify the cookie before requests, am I approaching the problem incorrectly, or would it be better to increase the allowed HTTP header size limit?
An example of the HTTP headers for a request is provided below:
Host: *URL_HERE*
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:71.0) Gecko/20100101 Firefox/71.0
Accept: application/json, text/plain, */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
X-Requested-With: XMLHttpRequest
Cache-Control: no-cache
Authorization: Bearer eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9...(truncated)
Connection: keep-alive
Referer: *URL_HERE*
Cookie: $netminers_$nmuid=921651885; $netminers_$(truncated)
Pragma: no-cache
Here are my getters:
public get(restUrl: string, api?: API): AxiosPromise<any> {
return axios.get(this.withApi(restUrl, api), this.requestConf());
}
The requestconf method:
private requestConf(): AxiosRequestConfig {
const token = authService.getJwt();
const headers: any = {
'X-Requested-With': 'XMLHttpRequest',
'Cache-Control': 'no-cache'
};
if (!token) {
console.warn('User is not logged in!');
} else {
headers.Authorization = `Bearer ${token}`;
}
return {
headers
};
}