Custom header in _redirects file using Gatsby plugin

Hello people,

I’m currently developing an ecommerce website using Gatsby and I’m using gatsby-plugin-netlify to proxy all my client-side API requests to my ecommerce provider APIs. This works greatly, however I need to add an x-forwarded-host header in my Netlify proxy so my e-commerce provider APIs work correctly under the netlify domain, in this case faststore.netlify.app

As far as my knowledge goes, gatsby-plugin-netlify writes a file called _redirects in my public folder. The content of this file is something like:

## Created with gatsby-plugin-netlify
/api/*  https://faststore.com.br/api/:splat  200
/:slug/p  /__client-side-product__/p  200
/*  /__client-side-search__  200

The only doc I could find about adding a custom header to a redirect was using the netlify.toml file. However, the same doc says _redirects takes precedence over netlify.toml file. Since I have a /* redirect in the end of my _redirects file, I can’t use the netlify.toml file since it will never have an effect.

Is there a way of adding x-forwarded-host header to reverse-proxy calls ?

Thanks !

There’s custom headers too using a _headers file: Custom headers | Netlify Docs

Thanks for the quick reply @hrishikesh.

As long as my knowledge goes, this _headers file configure response headers, and not reverse proxy headers. Also, in this doc, they describe a way for adding a reverse proxy header using the netlify.toml, but as I explained above, I can’t use this netlify.toml because of how netlify priority works

Well, then, you can create a bash script to modify content of your _redirects file at the end of the build. You can probably also use gatsby-node.js onPostBuild API to edit the file.

Also, I’d suggest to give netlify.toml file a try if you haven’t already just by reading the docs. Maybe, it will accept the headers as they’re not getting overwritten by the _redirects file? I can’t say for sure because I haven’t used it, but, it might as well work.

The problem is not generating the _redirects file, but rather the syntax of this file. I can’t figure out a way of writing proxy headers in this file. Using netlify’s playground I can’t create a redirect rule that outputs a redirect header. For example, using the following input:

/api/* https://faststore.com.br/:splat 200 x-forwarded-host=faststore.ecommerce.com

The playground gives the following output

[[redirects]]
from = "/api/*"
to = "https://faststore.com.br/:splat"
status = 200
force = false
conditions = {x-forwarded-host = "faststore.ecommerce.com"}

The x-forwarded-host is being treated as a condition, and not as a header. Taking a look at the netlify’s parser code, there is no headers parsing rule. However, I’ve also tried searching in netlfiy’s git repo for their production parser, however I couldn’t find header parsing rules either.

The solution of using the netlify.toml file would work, however, as I said in the first post, I can’t use this file, since I have this rule /* /__client-side-search__ 200 in my _redirects file what makes the netlify.toml file useless.

thanks !

Yeah sadly, it seems that netlify.toml is the only option for your use case.

If you have the redirects rules ready, maybe you don’t need the plugin anymore and can switch to a manual netlify.toml file. Now that you have got the code ready from Playground, any additional rules should not be difficult to add.

You could also ask the creator of the plugin to add an option to generate netlify.toml instead of _redirects, or if you can you can help the community by writing a plugin yourself.

About the netlify.toml thing I suggested in my previous reply, I just meant that while your _redirects file will take preference for applying the redirects, Netlify might actually apply headers from netlify.toml as there are no headers for the mentioned redirect in the _redirects file? I’m not sure, might be worth a try.

Cool ! I will try to use the netlify.toml only. Thanks ! @hrishikesh

1 Like

I have used the netlify playground to convert the _redirects into netlify.toml file and removed _redirects file using gatsby’s onPostBuild. Thanks !

1 Like