About add custom request headers
Hello guys,👋
In our project, we plan to add a global custom header to the request header sent to magento.
and we are using 
We tried adding a global custom request header context in the middleware, but when going through Apollo, it was converted into a get request, and the relevant header did not exist
so How should I add a global custom request header? maybe i need a help
thanks.🤝
magento-api, which uses apollo-client, and use get header to setcontent-currency & store
I know that fixed request headers can be set in middleware.config.js, for example:
customApolloHttpLinkOptions: {
useGETForQueries: true,
headers: {
'custom-header': 'custom-header-value',
'client-secret': 'xxxxxxxxx'
},
},
, But how to set dynamic global request
We tried adding a global custom request header context in the middleware, but when going through Apollo, it was converted into a get request, and the relevant header did not exist
so How should I add a global custom request header? maybe i need a help
thanks.🤝16 Replies
hey @Acacius looking into it 😉
hey @skirianov ,
I'm using
@vue-storefront/magento-api in my local Vue-Magento project,
and I'd like to add global request headers, similar to adding 'store' and 'content-currency' in the 'getHeader' method in the lib. use apollo-client lib
Can you please guide me in the right direction? Thank you very much
thanks, I will continue to investigate it in depth and come back to you when I encounter real doubts and difficulties. 👍hey 👋
So, one of the ways to do it is to extend middleware in the middleware.config file and add beforeCall hook that will intercept every request and can add additional headers thee
did that work? 😄
It didn't have the desired effect🤔
I referred to what you mentioned: https://docs.vuestorefront.io/v2/integrate/extending-integrations.html ,to try calling hooks to modify request headers
I can modify my request args here, but request header doesn't seem feasible. 😵💫
{
name: 'custom header',
hooks:(req,res)=>{
console.log('hooks_req',req)
// todo
return {
beforeCreate: ({ configuration }) => configuration,
afterCreate: ({ configuration }) => configuration,
beforeCall: ({ configuration, callName, args }) => {
// update header?
return args
},
afterCall: ({ configuration, callName, args, response }) => response
}
}
}
Maybe I should try other methods to add [x-forwarded-for] in request header 💪Extending integrations | Vue Storefront 2
Vue Storefront 2 documentation
As I learned, the request will be sent to the middleware and the internal Api-client (apollo) will be called to handle the request,
but my understanding is not enough at present to support me to try to modify the built-in header part.
I have mastered the coverage query. and custom interface + custom query
I will continue to study how to add custom request headers and set dynamic values.😄
I'm on it today and will try to help you out 😉
Hey, please try it like this
as you can see in the extension I added a new customHeader property to headers object and later on it is present in the headers even after request was returned from the ecommerce platfrom
@Acacius hope this should help
Thanks for your help @skirianov
I will try it again tomorrow
sure, hope that helps.
thanks @skirianov 👍
it is functioning properly.
I can also print out the same result: showing that I have set the request header
I'm also listening for requests in the terminal of my local service (using HttpToolkit), however it doesn't seem to show up in the request information
I checked the code history and found this：
https://github.com/vuestorefront/magento2/pull/1365/commits
It shows that allows us to set customHeader in a single method or customQuery()，
But it seems that the global getHeaders method in magento-api lib is not covered?
It is fixed to set the request headers including: currency, store and token （Because I see that these fields exist in all request headers in the api ，And these fields do not exist in the printing of hooks） i am using this rep : storefront-nuxt2-magento2
Or am I confusing these two things?