Angular5 服务器端呈现((未知网址): 0 Unknown Error) 的 Http 失败响应

Question

Angular5 服务器端渲染((未知 url)的 Http 失败响应:0 未知错误)。

我认为上述错误与 CORS 有关。但是没有 SSR 的 angular5 CORS 工作正常。

当我将 Api 更改为子域时会发生这种情况

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

Node Express :http://localhost:3000

下面是我为 Laravel PHP api 添加的 header 。

        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');

当使用 Node 与 Laravel PHP 通信时，出现以下错误

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

创建一个 proxy.conf.json 文件作为代理服务器。

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

然后修改package.json中的npm start命令如下

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

您可以在以下 url 上阅读更多相关信息

Proxy To Backend