requestheaderfetch-apinuxt3.jsnitro

Remove a header from POST request in Nuxt 3


I am trying to call an external API that appears to dislike my Origin header of http://localhost:3000 etc. which is fine, makes sense. But for testing purposes I just need to test that I can get the info back I need to move foreward on a project.

The API in question is referred to in this support comment which suggests removing the Origin header should do the trick:

How can I do that in Nuxt 3 using the $fetch API or perhaps a config/middleware/plugin thing? I've been searching for a while and I cannot find anyone trying to do the same, so I'm not sure if it's even possible. NOTE: The fetch is being made inside a useAsyncData call presently (if that's an issue).

Any pointer in the right direction would be greatfully appreciated.


Solution

  • I managed to resolve the issue by recognising that the call was coming from the browser on the front-end. Using Nuxt server side I created an API that made the fetch instead. Because that fetch was coming from my machine and NOT the browser, the Origin header was not sent through with the request.

    I don't think it mattered but I also included mode: "no-cors" just to be sure.

    I'll try removing that as I think it probably does not matter from a server side call.

    @Ellrohir - I'm still going to try your suggestion, definitely still use cases for being able to do header removals :)