404 with symfony 5 API and Vuejs as frontend in different root folders

Question

i've searched a lot but i didn't find the answer. This is my folder structure in my shared host:

- api.subdomain
  - index.php
  - .htaccess
  - ...

- public_html
  - index.html
  - ...

So when I go to http://example.com it loads Vuejs and my api is in http://api.example.com

The problem is that when I reload a page i.e. http://example.com/news (or enter manually to a link), it gives me a 404 Not found. I read in Vuejs documentation this:

Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser.

And they let this config:

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.html [L]
</IfModule>

But symfony autogenerated this:

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteCond %{REQUEST_URI}::$0 ^(/.+)/(.*)::\2$
    RewriteRule .* - [E=BASE:%1]

    # Sets the HTTP_AUTHORIZATION header removed by Apache
    RewriteCond %{HTTP:Authorization} .+
    RewriteRule ^ - [E=HTTP_AUTHORIZATION:%0]

    RewriteCond %{ENV:REDIRECT_STATUS} =""
    RewriteRule ^index\.php(?:/(.*)|$) %{ENV:BASE}/$1 [R=301,L]
    
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ %{ENV:BASE}/index.php [L]
</IfModule>

I don't know how to "merge" them and I don't understand how can I do if the apps are in different root directory. I tried a lot of things but none worked

Hopefully someone can help me. Thanks!

Does this answer your question? [Vue Router return 404 when revisit to the url](https://stackoverflow.com/questions/36399319/vue-router-return-404-when-revisit-to-the-url) — Phil, Aug 27 '20 at 01:12
Thanks for the suggestion. It partly fixes the problem (because it's the same .htaccess content), but that thread doesn't explain that you need an .htaccess in the API root project and another .htaccess in the Vuejs project (in shared host and with the structure that I have). — Adoc, Aug 27 '20 at 03:30

score 0 · Accepted Answer · answered Aug 27 '20 at 01:04

I already fix it. If someone else has this problem in a shared hosting, the solution is to add an .htaccess (as Vue documentation says) in the root of Vue app (in my case is public_html).

Just in case, this is the .htaccess:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

I don't know if this is the best solution but solves the problem.

404 with symfony 5 API and Vuejs as frontend in different root folders

1 Answers1