web-dev-qa-db-fra.com

Angular5 Server Side Rendering (Réponse d’échec Http pour (URL inconnue): Erreur inconnue)

Angular5 Server Side Rendering (Réponse d’échec HTTP pour (url inconnue): 0 Erreur inconnue).

Je crois que l'erreur ci-dessus est quelque chose avec la SCRO. Mais angular5 sans le SSR, le CORS fonctionne bien.

Cela se produit spécifiquement lorsque je change de l'API en sous-domaine

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

Node Express: http: // localhost: 3000

Vous trouverez ci-dessous l'en-tête que j'ai ajouté pour 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');

Lors de la communication avec Node à Laravel PHP, j'obtiens l'erreur ci-dessous.

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] } }
angularangular5serverside-renderingangular-universal
3
satz

créez un fichier proxy.conf.json qui agira comme un serveur proxy.

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

Et puis modifiez la commande npm start dans package.json comme ci-dessous

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

Vous pouvez en savoir plus à ce sujet sur l'URL suivante

Proxy To Backend

2
santosh singh

Je l'ai résolu en créant un nouvel hôte virtuel avec un nom différent pour Laravel API permet de dire http: //api.apiserver.lo

Cela résout le problème sans installer le plugin chrome.

0
satz