Redirects: redirect domain except specific subpage

I’m struggling with an exclusion for my redirects, hopefully I can find some help here.

I’m building a Vue app (SPA) and these redirects are working:

# This is working
[[redirects]]
    from = "https://domain2.com/*"
    to = "https://domain1.com/:splat"
    status = 301
    force = true

[[redirects]]
    from = "/*"
    to = "/index.html"
    status = 200

Now, I want to keep a single page at domain2.com/specific-subpage/item-id. But I can’t get that to work. I don’t get a 404, but the page stays empty.

I’ve tried the following options each individually at the top of my redirects file, so they are processed before the domain redirect:

# I've tried these one-by-one at the top of the redirects listed above.

[[redirects]]
    from = "https://domain2.com/specific-subpage/*"
    to = "/index.html"
    status = 200

[[redirects]]
    from = "https://domain2.com/specific-subpage/*"
    to = "../../index.html" # I thought, maybe we are in a subfolder? (../ doesn't work either)
    status = 200

[[redirects]]
    from = "https://domain2.com/specific-subpage/*"
    to = "/specific-subpage/:splat"
    status = 200

Hopefully someone can point me in the right direction, as I would like to understand how this works exactly.

Site name: reverent-sinoussi-5e0d53.netlify.app

Hey @Duncank1 :wave: ,

Our team reviewed this but it looks like you’ve redeployed with the working redirects so we’re not able to repro and see the errors in console. Would you be able to revert back to the broken deploy or share a screenshot of the errors shown in console session? Thank you!

Hi @audrey

Thanks for checking this out! I’ve indeed redeployed the working version of the site without this specific redirect in it; but I can make a preview deploy on another branch with a ‘broken’ redirect.
Which one of those do you think is the best one to try, so I can use that one in the preview release.

Thanks!

Are you using Vue Router @Duncank1 ?

I believe (from past testing) this might explain the absence of a 404 and the blank screen, especially if /specific-subpage is served from the Vue SPA and not a separate HTML file/directory.

(Happy if I’m wrong here.)

@coelmay Yes, I’m using the Vue router. Do you have any tips or workarounds for that?

I know that the /* /index.html 200 rule is there to redirect everything to the existing index.html file so the router can pick up on that, that is why I tried to add ../index.html redirects for the specific subpage.

So you’re (permanently) redirecting all traffic from domain2.com to domain1.com if I read the first redirect correctly. Are both domains listed as custom domains on the same site?

How is the page you want to not redirect served? Is it also part of a Vue SPA (with Vue Router) or a static HTML page?

If there was a directory called specific-subpage that was part of the site, it would get served instead of the redirect kicking in as none of the redirects are forced (regardless of Vue Router.)

Is the path you don’t want to redirect part of this domain? What is the path?

1 Like

I’ve managed to solve this and I wanted to share my solution and a full description of my barebones setup that i created for debugging here, just in case someone finds this in the future.

2 domains: (not the actual links)

4 routes:

  • /
  • /contact
  • /specific-subpage
  • /specific-subpage/string

What I want to achieve with redirects:
domain2.nl should redirect everything to domain1.nl, except for /specific-subpage/*, those pages should be working on both domains.

So:

  • domain2.nl → domain1.nl
  • domain2.nl/contact → domain1.nl/contact
  • domain2.nl/specific-subpage = no redirect
  • domain1.nl/specific-subpage = no redirect

Redirects file:

[[redirects]]
    from = "https://domain2.nl/specific-subpage/*"
    to = "/index.html"
    status = 200

[[redirects]]
    from = "https://domain2.nl/*"
    to = "https://domain1.nl/:splat"
    status = 301
    force = true

[[redirects]]
    from = "/*"
    to = "/index.html"
    status = 200

First problem with this:
This redirects all calls for js and css files to domain1 as well, causing CORS-errors. Adding a Allow Origin header solved that:

[[headers]]
  # Define which paths this specific [[headers]] block will cover.
  for = "/*"
    [headers.values]
    Access-Control-Allow-Origin = "*"

However; probably due to the files-calls still begin redirected from domain2 to domain1, Vue Router did not like this, and the /specific-subpage stayed blank. (index.html was returned, only a vue router error in the console).

Fix for this
Remove the force=true from the 301 redirect; that causes the actual files (.js and .css etc) to be loaded from the server with the requested domain, so that those calls are not redirected. In this case, Vue Router and the entire site, work as I want them to.

Thanks
Thanks for helping me out!

1 Like

@Duncank1 :wave:

Thank you so much for coming back and sharing such a detailed solution. This will definitely be beneficial to future Forums members who encounter something similar.

Glad everything is working for you now. Happy building :rocket: