Redirect proxy domain/path to subdomain/path not working

I’m having some trouble with redirects. I am using NUXT/NetlifyCMS on one Netlify site and a VueCLI app on another Netlify site using a subdomain (separate Git repos). I’ve read through the docs and posts, but can’t seem to get it to work correctly.

Main domain/website:
https://example.com

app VueCLI (using pushState for no-hash urls):
https://app.example.com
_redirects with:
/* /index.html 200

I am trying to redirect a couple of paths to the app subdomain but have it proxy and look like it’s the main site.
https://example.com/test/123 —> https://app.example.com/test/123

I am trying to redirect with netlify.toml on the main domain example.com site like this:

[[redirects]]
  from = “/test/*”
  to = "https://app.example.com/test/:splat"
  status = 200
  force = true

Using 301 works, but I don’t get the main domain proxy. With 200, it redirects and the domain stays as the main domain, except I get 404’s for manifest.json and all chunk css/js assets.

Is there a way to get this to work?

Thanks for any help!

hi! I am not a redirects expert, but before i call someone over, i want to make sure you saw this guide already?

if not, please post again, and we’ll try and troubleshoot.

Thanks for the reply @perry. Yes I have gone through that and the Netlify Docs. I must be missing some nuance since the redirect works, but the site receiving the request doesn’t seem to be receiving the proxy correctly.

Heya! Whilst I don’t know all there is to know about these SSGs, I can certainly take a look at this from a Netlify/redirects point-of-view!

I don’t suppose you have the actual site names to hand here at Netlify, do you? The site API ID will do just fine, if you don’t want to share the URL. :slight_smile:

@Scott thanks for looking. I don’t think the issue is so much the SSG as it is redirecting from that netlify.toml fine as far as I can tell.

Here are the API IDs:
main site: 1fdc4814-5a05-47e1-b2da-e4ab35a0781c
app to redirect to: e5ddb72c-b349-414c-b77e-ae98bbea245b

Thanks for any help!

Ah, interesting! Okay, so it’s proxying just fine. The issue is in additional resources which aren’t available on your main site, but the site which you’re proxying from will need them too.

You’ll also want the following proxy rules in your netlify.toml:

  from = “/js/*”
  to = "https://app.example.com/js/:splat"
  status = 200
  force = false

  from = “/css/*”
  to = "https://app.example.com/css/:splat"
  status = 200
  force = false

This should ensure that the relevant resources are also brought from the site being proxied! :slight_smile:

Thanks @Scott. Hmm, so I have to duplicate the resources from the app on the main site? I don’t understand why that would be. The redirects you said to add would make all of the js/css of the main site redirect to the app site, right? The main site has it’s own resources that it needs that are different than the app.

I tried to implement those redirect rules you provided, but I get this build error:

10:55:21 AM: Failed during stage ‘Reading and parsing configuration files’:
When resolving config file /opt/build/repo/netlify.toml:
Could not parse configuration file
Cannot redefine existing key ‘redirects.from’.

So, my .toml on the main site looks like:

[[redirects]]
  from = "/test/*"
  to = "https://app.example.com/test/:splat"
  status = 200
  force = true

  from = "/js/*"
  to = "https://app.example.com/js/:splat"
  status = 200
  force = false

  from = "/css/*"
  to = "https://app.example.com/css/:splat"
  status = 200
  force = false

But shouldn’t I be able to redirect and the resources on the site/app being redirecte TO uses it’s own resources, while the site redirecting FROM uses it’s own also?

Thanks!

Well, you could replicate them or use a redirect rule to gather the correct ones, either/or. I’d opt with the latter!

What you’re doing is trying to load the app on your main site. The main site needs to be told exactly what to proxy – this includes all resources. It won’t magically know about them, you see.

Cannot redefine existing key would imply that there’s already a rule for a particular path.

The redirects you said to add would make all of the js/css of the main site redirect to the app site, right?

The more I think about it, the more I think that… yes. Easiest thing to do would be to change the structure on one site but I understand that that’s not particularly desirable.

@Scott Ok thanks. So I got around the Cannot redefine existing key issue. I didn’t have [[redirects]] before each redirect rule. Now on to the next problem :smile: The .netlify/functions path isn’t redirecting, even with a forced 301.

Here’s my toml is structured like this now:

  from = "/js/*"
  to = "https://app.example.com/js/:splat"
  status = 200
  force = false
[[redirects]]
  from = "/css/*"
  to = "https://app.example.com/css/:splat"
  status = 200
  force = false
[[redirects]]
  from = "/img/*"
  to = "https://app.example.com/img/:splat"
  status = 200
  force = false
[[redirects]]
  from = "/test/*"
  to = "https://app.example.com/test/:splat"
  status = 200
  force = true
[[redirects]]
  from = "/.netlify/functions/exampleEndpoint/*"
  to = "https://app.example.com/.netlify/functions/exampleEndpoint/:splat"
  status = 301
  force = true

The url remains as https://example.com/.netlify/functions/exampleEndpoint/272872466298176019 and returns a 404.

I’m explicitly telling it what to proxy here, right? Is there something different going on with the .netlify/functions directories?

Thank you!

Hi, @spv. To test this we need the actual URL which should redirect but isn’t. Would you please send us the real URL?

You can post it publicly or private message (PM) that to one of our support staff, whichever you prefer. I’ve confirmed that PMs are enabled for your community login. Note, that only one person can see the PM and this will likely mean a slower reply than posting the information publicly. Please feel free to reply to however you prefer though.