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.
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.
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.
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!
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?
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 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?
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.
The