use-Fetch Post is having issue with csrf headers

[patcrama]

When I am using post with csrf header to spring boot backend it's throwing error (403) as the header is not posting with csrf , but csrf token exists and I can see the token from console.

const { get, post, response, loading, error } = useFetch( process.env.BACKEND_SERVER );

headers: { 'X-XSRF-TOKEN': csrfToken, 'Accept': 'application/json', 'Content-Type': 'application/json' } const postData={ eventType: 'Login', statusInd: 'Success' } const aslaIns= await post('/aslaLog',postData,{headers:headers});

so it sounds to me like what ever the header I am passing is not used by useFetch so that's why I am getting 403 error from spring boot, but if I use same with axios post it works good. Below is the axios working code.

await axios({ method: 'post', url: '/api/log/track', data: postData, // you are sending body instead headers: { 'X-XSRF-TOKEN': csrfToken, 'Accept': 'application/json', 'Content-Type': 'application/json' }, }).then((response) => { console.log('user inserted into table'); }) .catch((error) => { console.log('error in user insert into table'); }) it would be great if some body can share post example with headers using use-Fetch

[patcrama]

could any body help me on this?

[alex-cory]

Are you seeing the headers in the network tab in devtools for the request?

[patcrama]

Hi Alex, Thanks for replying to my issue, I can see headers but not the one I sent X-XSRF-TOKEN when I used useFetch but I can see this header when I am using Axios. Below images is from axios Below is image is from use-http with useFetch hook.

[alex-cory]

It might be because of caching. Did you try cachePolicy: 'no-cache'?

[patcrama]

Hi Alex, I tried adding cachePolicy but still same error (403), I am suspecting that use-http is not taking the headers I am passing on, not sure if the options I used is right way to pass the headers to use-http, do you have any example of post request with use-http and headers included?

[alex-cory]

const { ... } = useFetch('url-or-path', options => {
  options.headers = {
    /* your headers here */
  }
  return options
})

You could also do this. And if your url is set in the provider, you don't need to pass the url.

const { post } = useFetch({
  headers: { ... }
})
post('/route', body)

Or you if you are making multiple different api calls from the single useFetch you could do

const { post } = useFetch({
  interceptors: {
    request({ request }) {
       // if the URL is the exact one you want and method === 'POST', then add the headers to I believe `request.headers`
      return request
    }
  }
})

[patcrama]

Thanks for your the details, I added provider and implemented the global options with provider and that worked good. Thank you so much again. I would call it close this issue as it is answered.

const globalOptions = { interceptors: { // every time we make an http request, this will run 1st before the request is made // url, path and route are supplied to the interceptor // request options can be modified and must be returned request: async ({ options}) => {

  if(options.method==='POST'){
    options.headers['X-XSRF-TOKEN']=csrfToken;
    options.headers.Accept='application/json';
    options.headers['Content-Type']='application/json'; 
  } 
  return options
},
// every time we make an http request, before getting the response back, this will run
// response: async ({ response }) => {
//   const res = response
//   if (res.data) res.data = toCamel(res.data)
//   return res
// }

}} return (

);