Mon application avec Angular est sur example.com et mon backend est sur example.com/api. Mon problème est lorsque je veux envoyer une requête au serveur avec l'URL https://example. com/api/login/get-cookie, j'obtiens une erreur HttpErrorResponse. Je viens de taper la même URL dans mon navigateur mais je vais être redirigé vers la page d'accueil. J'obtiens donc probablement cette erreur, car mon serveur n'est jamais accessible.

Comment puis-je autoriser Angular à ignorer toutes les URL avec example.com/api/* ?

Mon fichier app-routing.modules.ts ressemble à ceci :

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [HomeGuard] },
  { path: 'login', component: LoginComponent, canActivate: [LoginGuard] },
  { path: 'register', component: RegisterComponent, canActivate: [LoginGuard] },
  { path: 'search', component: SearchComponent, canActivate: [SearchGuard] },
  { path: 'edit-profile', component: ProfileComponent, canActivate: [SearchGuard] }
];

@NgModule({
  imports: [RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' })],
  exports: [RouterModule]
})
export class AppRoutingModule { }

.htaccess :

RewriteEngine On
    # If an existing asset or directory is requested go to it as it is
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d
    RewriteRule ^ - [L]
    # If the requested resource doesn't exist, use index.html
RewriteRule ^ /index.html
0
Reza 4 févr. 2020 à 23:45

1 réponse

Meilleure réponse

L'ajout de cette redirection prendra toute URL qui ne correspond pas aux chemins ci-dessus et les redirigera vers la page d'accueil. Ou, selon vos préférences, vous pouvez créer un composant 404 ou Error à afficher à la place avec { path: '**', component: ErrorComponent }

const routes: Routes = [
  { path: '', component: HomeComponent, canActivate: [HomeGuard] },
  { path: 'login', component: LoginComponent, canActivate: [LoginGuard] },
  { path: 'register', component: RegisterComponent, canActivate: [LoginGuard] },
  { path: 'search', component: SearchComponent, canActivate: [SearchGuard] },
  { path: 'edit-profile', component: ProfileComponent, canActivate: [SearchGuard] },
  { path: '**', redirectTo: '/', pathMatch: 'full' }
];
2
Troy Bailey 4 févr. 2020 à 20:52