Angular5 Server Side Rendering(Http failure response for (unknown url): 0 Unknown Error)

Question

Angular5 Server Side Rendering(Http failure response for (unknown url): 0 Unknown Error).

I believe the above error is something with CORS. But angular5 without the SSR the CORS is working fine.

This happens specifically when i change the Api to subdomain

Laravel API : http://api.localhost:80

Node Express :http://localhost:3000

Below is the header which i have added for Laravel PHP api.

        header('Access-Control-Allow-Origin: http://localhost:3000');
        header('Access-Control-Allow-Credentials: true');
        header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE');
        header('Access-Control-Allow-Headers: Origin, Content-Type,Accept, X-Auth-Token ,App-Auth,X-XSRF-TOKEN,Authorization');
        header('Access-Control-Max-Age: 86400');

When communicating with Node to Laravel PHP , am getting the below error

Uncaught (in promise): [object Object]
    at resolvePromise (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:824:31)
    at resolvePromise (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:795:17)
    at D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:873:17
    at ZoneDelegate.invokeTask (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:425:31)
    at Object.onInvokeTask (D:\ng\app-root\node_modules\@angular\core\bundles\core.umd.js:4783:33)
    at ZoneDelegate.invokeTask (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:424:36)
    at Zone.runTask (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:192:47)
    at drainMicroTaskQueue (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:602:35)
    at ZoneTask.invokeTask (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:503:21)
    at ZoneTask.invoke (D:\ng\app-root\node_modules\zone.js\dist\zone-node.js:488:48)
  rejection: 
   HttpErrorResponse {
     headers: HttpHeaders { normalizedNames: Map {}, lazyUpdate: null, headers: Map {} },
     status: 0,
     statusText: 'Unknown Error',
     url: null,
     ok: false,
     name: 'HttpErrorResponse',
     message: 'Http failure response for (unknown url): 0 Unknown Error',
     error: 
      ProgressEvent {
        type: 'error',
        target: [Object],
        currentTarget: [Object],
        lengthComputable: false,
        loaded: 0,
        total: 0 } },
  promise: 
   ZoneAwarePromise {
     __zone_symbol__state: 0,
     __zone_symbol__value: 
      HttpErrorResponse {
        headers: [Object],
        status: 0,
        statusText: 'Unknown Error',
        url: null,
        ok: false,
        name: 'HttpErrorResponse',
        message: 'Http failure response for (unknown url): 0 Unknown Error',
        error: [Object] } },
  zone: 
   Zone {
     _properties: { isAngularZone: true },
     _parent: 
      Zone {
        _properties: {},
        _parent: null,
        _name: '',
        _zoneDelegate: [Object] },
     _name: 'angular',
     _zoneDelegate: 
      ZoneDelegate {
        _taskCounts: [Object],
        zone: [Circular],
        _parentDelegate: [Object],
        _forkZS: null,
        _forkDlgt: null,
        _forkCurrZone: [Object],
        _interceptZS: null,
        _interceptDlgt: null,
        _interceptCurrZone: [Object],
        _invokeZS: [Object],
        _invokeDlgt: [Object],
        _invokeCurrZone: [Circular],
        _handleErrorZS: [Object],
        _handleErrorDlgt: [Object],
        _handleErrorCurrZone: [Circular],
        _scheduleTaskZS: [Object],
        _scheduleTaskDlgt: [Object],
        _scheduleTaskCurrZone: [Circular],
        _invokeTaskZS: [Object],
        _invokeTaskDlgt: [Object],
        _invokeTaskCurrZone: [Circular],
        _cancelTaskZS: [Object],
        _cancelTaskDlgt: [Object],
        _cancelTaskCurrZone: [Circular],
        _hasTaskZS: [Object],
        _hasTaskDlgt: [Object],
        _hasTaskDlgtOwner: [Circular],
        _hasTaskCurrZone: [Circular] } },
  task: 
   ZoneTask {
     _zone: 
      Zone {
        _properties: [Object],
        _parent: [Object],
        _name: 'angular',
        _zoneDelegate: [Object] },
     runCount: 0,
     _zoneDelegates: null,
     _state: 'notScheduled',
     type: 'microTask',
     source: 'Promise.then',
     data: undefined,
     scheduleFn: undefined,
     cancelFn: null,
     callback: [Function],
     invoke: [Function] } }

Answer 1

create a proxy.conf.json file to act as a proxy server.

{
  "/api": {
    "target": "your full api server url",
    "changeOrigin": true
  }
}

And then modify the npm start command in package.json as below

"start": "ng serve --proxy-config proxy.conf.json"

You can read more about this on following url

Proxy To Backend