Remind the user to omit the protocol prefix for POST, DELETE and PUT …

…requests in Angular (#170) * Remind the user to omit the protocol prefix for POST, DELETE and PUT requests, else Angular will not provide an XSRF header. Example: `gatewayUri = '//localhost:8080'`. See angular/angular#20511 * - If the frontend is not SAMEORIGIN, then prefix the API URI with the gateway domain, but without the protocol prefix, otherwise Angular will not provide a CSRF header for POST/DELETE/PUT requests. See: angular/angular#20511 Example: `export const apiUri = '//localhost:8080/bff/v1'`. - Delete gatewayUri references and use only the path for API requests, as they are are of the same origin --------- Co-authored-by: ph <[email protected]>
ch4mpy · Jan 11, 2024 · 82c4a9e · 82c4a9e
1 parent cf94263
commit 82c4a9e
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/samples/tutorials/bff/frontend/src/app/app.module.ts b/samples/tutorials/bff/frontend/src/app/app.module.ts
@@ -5,10 +5,13 @@ import { BrowserModule } from '@angular/platform-browser';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 
-export const gatewayUri = 'https://localhost:8080';
-export const apiUri = `${gatewayUri}/bff/v1`;
-export const greetingApiUri = `${apiUri}/greeting`;
-export const usersApiUri = `${apiUri}/users`;
+// If the frontend is not SAMEORIGIN, then prefix the API URI with the gateway domain, but without the protocol prefix,
+// otherwise Angular will not provide a CSRF header for POST/DELETE/PUT requests.
+// See: https://github.com/angular/angular/issues/20511
+// Example: `export const apiUri = '//localhost:8080/bff/v1'`.
+export const apiUri = `/bff/v1`;
+export const greetingApiUri = `/greeting`;
+export const usersApiUri = `/users`;
 
 @NgModule({
   declarations: [

diff --git a/samples/tutorials/bff/frontend/src/app/user.service.ts b/samples/tutorials/bff/frontend/src/app/user.service.ts
@@ -3,7 +3,7 @@ import { Injectable } from '@angular/core';
 import { Subscription, interval, lastValueFrom, map } from 'rxjs';
 import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 import { Observable } from 'rxjs/internal/Observable';
-import { gatewayUri, usersApiUri } from './app.module';
+import { usersApiUri } from './app.module';
 
 @Injectable({
   providedIn: 'root',
@@ -57,7 +57,7 @@ export class UserService {
   }
 
   async loginOptions(): Promise<Array<LoginOptionDto>> {
-    return lastValueFrom(this.http.get(`${gatewayUri}/login-options`)).then(
+    return lastValueFrom(this.http.get('/login-options')).then(
       (dto) => dto as LoginOptionDto[]
     );
   }