feat(platform-server): add option for absolute URL HTTP support (#37539)

In version 10.0.0-next.8, we introduced absolute URL support for
server-based HTTP requests, so long as the fully-resolved URL was
provided in the initial config. However, doing so represents a
breaking change for users who already have their own interceptors
to model this functionality, since our logic executes before all
interceptors fire on a request. See original PR #37071.

Therefore, we introduce a flag to make this change consistent with
v9 behavior, allowing users to opt in to this new behavior. This
commit also fixes two issues with the previous implementation:
1. if the server was initiated with a relative URL, the absolute
URL construction would fail because needed components were empty
2. if the user's absolute URL was on a port, the port would not
be included

PR Close #37539
This commit is contained in:
Adam 2020-06-11 11:42:31 -05:00 committed by Andrew Kushnir
parent d12cdb5019
commit d37049a2a2
4 changed files with 156 additions and 88 deletions

View File

@ -5,6 +5,7 @@ export declare const INITIAL_CONFIG: InjectionToken<PlatformConfig>;
export declare interface PlatformConfig {
document?: string;
url?: string;
useAbsoluteUrl?: boolean;
}
export declare const platformDynamicServer: (extraProviders?: StaticProvider[] | undefined) => PlatformRef;

View File

@ -5,6 +5,7 @@
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file at https://angular.io/license
*/
import {INITIAL_CONFIG, PlatformConfig} from './tokens';
const xhr2: any = require('xhr2');
@ -104,15 +105,18 @@ export abstract class ZoneMacroTaskWrapper<S, R> {
export class ZoneClientBackend extends
ZoneMacroTaskWrapper<HttpRequest<any>, HttpEvent<any>> implements HttpBackend {
constructor(private backend: HttpBackend, private platformLocation: PlatformLocation) {
constructor(
private backend: HttpBackend, private platformLocation: PlatformLocation,
private config: PlatformConfig) {
super();
}
handle(request: HttpRequest<any>): Observable<HttpEvent<any>> {
const {href, protocol, hostname} = this.platformLocation;
if (!isAbsoluteUrl.test(request.url) && href !== '/') {
const {href, protocol, hostname, port} = this.platformLocation;
if (this.config.useAbsoluteUrl && !isAbsoluteUrl.test(request.url) &&
isAbsoluteUrl.test(href)) {
const baseHref = this.platformLocation.getBaseHrefFromDOM() || href;
const urlPrefix = `${protocol}//${hostname}`;
const urlPrefix = `${protocol}//${hostname}` + (port ? `:${port}` : '');
const baseUrl = new URL(baseHref, urlPrefix);
const url = new URL(request.url, baseUrl);
return this.wrap(request.clone({url: url.toString()}));
@ -126,15 +130,16 @@ export class ZoneClientBackend extends
}
export function zoneWrappedInterceptingHandler(
backend: HttpBackend, injector: Injector, platformLocation: PlatformLocation) {
backend: HttpBackend, injector: Injector, platformLocation: PlatformLocation,
config: PlatformConfig) {
const realBackend: HttpBackend = new HttpInterceptingHandler(backend, injector);
return new ZoneClientBackend(realBackend, platformLocation);
return new ZoneClientBackend(realBackend, platformLocation, config);
}
export const SERVER_HTTP_PROVIDERS: Provider[] = [
{provide: XhrFactory, useClass: ServerXhr}, {
provide: HttpHandler,
useFactory: zoneWrappedInterceptingHandler,
deps: [HttpBackend, Injector, PlatformLocation]
deps: [HttpBackend, Injector, PlatformLocation, INITIAL_CONFIG]
}
];

View File

@ -14,8 +14,25 @@ import {InjectionToken} from '@angular/core';
* @publicApi
*/
export interface PlatformConfig {
/**
* The initial DOM to use to bootstrap the server application.
* @default create a new DOM using Domino
*/
document?: string;
/**
* The URL for the current application state. This is
* used for initializing the platform's location and
* for setting absolute URL resolution for HTTP requests.
* @default none
*/
url?: string;
/**
* Whether to append the absolute URL to any relative HTTP
* requests. If set to true, this logic executes prior to
* any HTTP interceptors that may run later on in the request.
* @default false
*/
useAbsoluteUrl?: boolean;
}
/**

View File

@ -793,104 +793,149 @@ describe('platform-server integration', () => {
});
}));
it('can make relative HttpClient requests', async () => {
const platform = platformDynamicServer([
{provide: INITIAL_CONFIG, useValue: {document: '<app></app>', url: 'http://localhost'}}
]);
const ref = await platform.bootstrapModule(HttpClientExampleModule);
const mock = ref.injector.get(HttpTestingController) as HttpTestingController;
const http = ref.injector.get(HttpClient);
ref.injector.get(NgZone).run(() => {
http.get<string>('/testing').subscribe((body: string) => {
NgZone.assertInAngularZone();
expect(body).toEqual('success!');
describe('relative requests', () => {
it('correctly maps to absolute URL request with base config', async () => {
const platform = platformDynamicServer([{
provide: INITIAL_CONFIG,
useValue: {document: '<app></app>', url: 'http://localhost', useAbsoluteUrl: true}
}]);
const ref = await platform.bootstrapModule(HttpClientExampleModule);
const mock = ref.injector.get(HttpTestingController) as HttpTestingController;
const http = ref.injector.get(HttpClient);
ref.injector.get(NgZone).run(() => {
http.get<string>('/testing').subscribe((body: string) => {
NgZone.assertInAngularZone();
expect(body).toEqual('success!');
});
mock.expectOne('http://localhost/testing').flush('success!');
});
mock.expectOne('http://localhost/testing').flush('success!');
});
});
it('can make relative HttpClient requests two slashes', async () => {
const platform = platformDynamicServer([
{provide: INITIAL_CONFIG, useValue: {document: '<app></app>', url: 'http://localhost/'}}
]);
const ref = await platform.bootstrapModule(HttpClientExampleModule);
const mock = ref.injector.get(HttpTestingController) as HttpTestingController;
const http = ref.injector.get(HttpClient);
ref.injector.get(NgZone).run(() => {
http.get<string>('/testing').subscribe((body: string) => {
NgZone.assertInAngularZone();
expect(body).toEqual('success!');
it('uses default URL behavior when not enabled', async () => {
const platform = platformDynamicServer([{
provide: INITIAL_CONFIG,
useValue: {document: '<app></app>', url: 'http://localhost', useAbsoluteUrl: false}
}]);
const ref = await platform.bootstrapModule(HttpClientExampleModule);
const mock = ref.injector.get(HttpTestingController) as HttpTestingController;
const http = ref.injector.get(HttpClient);
ref.injector.get(NgZone).run(() => {
http.get<string>('/testing').subscribe(() => {}, (body: string) => {
NgZone.assertInAngularZone();
expect(body).toEqual('error');
});
mock.expectOne('/testing').flush('error');
});
mock.expectOne('http://localhost/testing').flush('success!');
});
});
it('can make relative HttpClient requests no slashes', async () => {
const platform = platformDynamicServer([
{provide: INITIAL_CONFIG, useValue: {document: '<app></app>', url: 'http://localhost'}}
]);
const ref = await platform.bootstrapModule(HttpClientExampleModule);
const mock = ref.injector.get(HttpTestingController) as HttpTestingController;
const http = ref.injector.get(HttpClient);
ref.injector.get(NgZone).run(() => {
http.get<string>('testing').subscribe((body: string) => {
NgZone.assertInAngularZone();
expect(body).toEqual('success!');
it('correctly maps to absolute URL request with port', async () => {
const platform = platformDynamicServer([{
provide: INITIAL_CONFIG,
useValue: {document: '<app></app>', url: 'http://localhost:5000', useAbsoluteUrl: true}
}]);
const ref = await platform.bootstrapModule(HttpClientExampleModule);
const mock = ref.injector.get(HttpTestingController) as HttpTestingController;
const http = ref.injector.get(HttpClient);
ref.injector.get(NgZone).run(() => {
http.get<string>('/testing').subscribe((body: string) => {
NgZone.assertInAngularZone();
expect(body).toEqual('success!');
});
mock.expectOne('http://localhost:5000/testing').flush('success!');
});
mock.expectOne('http://localhost/testing').flush('success!');
});
});
it('can make relative HttpClient requests no slashes longer url', async () => {
const platform = platformDynamicServer([{
provide: INITIAL_CONFIG,
useValue: {document: '<app></app>', url: 'http://localhost/path/page'}
}]);
const ref = await platform.bootstrapModule(HttpClientExampleModule);
const mock = ref.injector.get(HttpTestingController) as HttpTestingController;
const http = ref.injector.get(HttpClient);
ref.injector.get(NgZone).run(() => {
http.get<string>('testing').subscribe((body: string) => {
NgZone.assertInAngularZone();
expect(body).toEqual('success!');
it('correctly maps to absolute URL request with two slashes', async () => {
const platform = platformDynamicServer([{
provide: INITIAL_CONFIG,
useValue: {document: '<app></app>', url: 'http://localhost/', useAbsoluteUrl: true}
}]);
const ref = await platform.bootstrapModule(HttpClientExampleModule);
const mock = ref.injector.get(HttpTestingController) as HttpTestingController;
const http = ref.injector.get(HttpClient);
ref.injector.get(NgZone).run(() => {
http.get<string>('/testing').subscribe((body: string) => {
NgZone.assertInAngularZone();
expect(body).toEqual('success!');
});
mock.expectOne('http://localhost/testing').flush('success!');
});
mock.expectOne('http://localhost/path/testing').flush('success!');
});
});
it('can make relative HttpClient requests slashes longer url', async () => {
const platform = platformDynamicServer([{
provide: INITIAL_CONFIG,
useValue: {document: '<app></app>', url: 'http://localhost/path/page'}
}]);
const ref = await platform.bootstrapModule(HttpClientExampleModule);
const mock = ref.injector.get(HttpTestingController) as HttpTestingController;
const http = ref.injector.get(HttpClient);
ref.injector.get(NgZone).run(() => {
http.get<string>('/testing').subscribe((body: string) => {
NgZone.assertInAngularZone();
expect(body).toEqual('success!');
it('correctly maps to absolute URL request with no slashes', async () => {
const platform = platformDynamicServer([{
provide: INITIAL_CONFIG,
useValue: {document: '<app></app>', url: 'http://localhost', useAbsoluteUrl: true}
}]);
const ref = await platform.bootstrapModule(HttpClientExampleModule);
const mock = ref.injector.get(HttpTestingController) as HttpTestingController;
const http = ref.injector.get(HttpClient);
ref.injector.get(NgZone).run(() => {
http.get<string>('testing').subscribe((body: string) => {
NgZone.assertInAngularZone();
expect(body).toEqual('success!');
});
mock.expectOne('http://localhost/testing').flush('success!');
});
mock.expectOne('http://localhost/testing').flush('success!');
});
});
it('can make relative HttpClient requests slashes longer url with base href', async () => {
const platform = platformDynamicServer([{
provide: INITIAL_CONFIG,
useValue:
{document: '<base href="http://other"><app></app>', url: 'http://localhost/path/page'}
}]);
const ref = await platform.bootstrapModule(HttpClientExampleModule);
const mock = ref.injector.get(HttpTestingController) as HttpTestingController;
const http = ref.injector.get(HttpClient);
ref.injector.get(NgZone).run(() => {
http.get<string>('/testing').subscribe((body: string) => {
NgZone.assertInAngularZone();
expect(body).toEqual('success!');
it('correctly maps to absolute URL request with longer url and no slashes', async () => {
const platform = platformDynamicServer([{
provide: INITIAL_CONFIG,
useValue:
{document: '<app></app>', url: 'http://localhost/path/page', useAbsoluteUrl: true}
}]);
const ref = await platform.bootstrapModule(HttpClientExampleModule);
const mock = ref.injector.get(HttpTestingController) as HttpTestingController;
const http = ref.injector.get(HttpClient);
ref.injector.get(NgZone).run(() => {
http.get<string>('testing').subscribe((body: string) => {
NgZone.assertInAngularZone();
expect(body).toEqual('success!');
});
mock.expectOne('http://localhost/path/testing').flush('success!');
});
mock.expectOne('http://other/testing').flush('success!');
});
it('correctly maps to absolute URL request with longer url and slashes', async () => {
const platform = platformDynamicServer([{
provide: INITIAL_CONFIG,
useValue:
{document: '<app></app>', url: 'http://localhost/path/page', useAbsoluteUrl: true}
}]);
const ref = await platform.bootstrapModule(HttpClientExampleModule);
const mock = ref.injector.get(HttpTestingController) as HttpTestingController;
const http = ref.injector.get(HttpClient);
ref.injector.get(NgZone).run(() => {
http.get<string>('/testing').subscribe((body: string) => {
NgZone.assertInAngularZone();
expect(body).toEqual('success!');
});
mock.expectOne('http://localhost/testing').flush('success!');
});
});
it('correctly maps to absolute URL request with longer url, slashes, and base href',
async () => {
const platform = platformDynamicServer([{
provide: INITIAL_CONFIG,
useValue: {
document: '<base href="http://other"><app></app>',
url: 'http://localhost/path/page',
useAbsoluteUrl: true
}
}]);
const ref = await platform.bootstrapModule(HttpClientExampleModule);
const mock = ref.injector.get(HttpTestingController) as HttpTestingController;
const http = ref.injector.get(HttpClient);
ref.injector.get(NgZone).run(() => {
http.get<string>('/testing').subscribe((body: string) => {
NgZone.assertInAngularZone();
expect(body).toEqual('success!');
});
mock.expectOne('http://other/testing').flush('success!');
});
});
});
it('requests are macrotasks', async(() => {