Angular SSR: "Refused to set unsafe header 'Origin'" error in v16 project (works in fresh v17...

Use Case

I'm working on an Angular SSR app (originally v16, now upgraded to v17) with a Spring Boot backend. The backend requires an Origin header on all HTTP requests (including the SSR ones), or it rejects the request. I know setting Origin manually is discouraged since it's a restricted header, but due to business constraints I must inject a custom Origin value from the SSR server.

Solution so far

• 
  Created an Angular HttpInterceptor that sets the Origin header on all requests that are made from the node server.
  
  
• 
  Verified that this interceptor works correctly in a newly created Angular v17 SSR project
  
  
• 
  Spring boot backend receives the correct Origin and also the User-Agent is node as expected
  

But when I apply the same interceptor logic in my existing Angular v16 project, I get:

• 
  Error: Refused to set unsafe header "Origin"
  
  
• 
  Origin header is missing at the Spring boot backend
  
  
• 
  User-Agent is Mozilla/5.0 (Darwin x64) node.js/20.19.0 v8/11.3.244.8-node.26, which is not what Angular v17 emitted
  

Here is the interceptor code

@Injectable()
export class OriginInterceptor implements HttpInterceptor {

constructor(
@Inject(PLATFORM_ID) private platformId: Object,
@Inject(ORIGIN) private origin: string
) { }

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {

if (isPlatformServer(this.platformId)) {

const modifiedReq = request.clone({
setHeaders: {
Origin: this.origin
}
});

return next.handle(modifiedReq);
}

return next.handle(request);
}
}


Second thought

After that I thought there might be some internal difference about how SSR works under the hood so I decided to upgrade the existing v16 project to v17 matching all package versions with the working fresh v17 app, hoping that this would solve the issue.

However, still seeing the same issue — setting Origin fails, and SSR requests expose full user-agent which is really strange for me.

Additional Information

I am using a logger interceptor to understand the server requests and here is the code

@Injectable()
export class LoggerInterceptor implements HttpInterceptor {

constructor(
@Inject(PLATFORM_ID) private platformId: Object,
@Inject(ORIGIN) private origin: string
) { }

intercept(request: HttpRequest<unknown>, next: HttpHandler): Observable<HttpEvent<unknown>> {
const timestamp = Date.now();

if (isPlatformBrowser(this.platformId)) {
console.log(`Browser HTTP request started (${timestamp}):`, request.url, request.method);
} else if (isPlatformServer(this.platformId)) {
console.log(`Server HTTP request started (${timestamp}):`, request.url, request.method);
}

// Pass the request and log when it completes
return next.handle(request).pipe(
tap({
next: (event) => {
if (isPlatformBrowser(this.platformId)) {
console.log(`Browser HTTP response received (${timestamp}):`, request.url);
} else if (isPlatformServer(this.platformId)) {
console.log(`Server HTTP response received (${timestamp}):`, request.url);
}
},
error: (error) => {
if (isPlatformBrowser(this.platformId)) {
console.error(`Browser HTTP error (${timestamp}):`, request.url, error);
} else if (isPlatformServer(this.platformId)) {
console.error(`Server HTTP error (${timestamp}):`, request.url, error);
}
}
})
);
}
}



And here is the error output



Queries

• What am I missing here? what has changed in terms of SSR between v16 and v17?
• Why a freshly created v17 and upgraded v17 is behaving differently?
• How to solve the Origin i.e. set custom origin value in v16

Continue reading...