Angular5通用:将循环结构转换为JSON

Question

我正在用Laravel开发一个带有后端API的角通用程序，并试图使用docker-组合来托管这个应用程序。

所以结构会是

Laravel (Api http://api.app.lo) 角(http://app.lo) nginx (Nginx配置) docker-compose.yml

当我试图使用docker托管应用程序并且无法跟踪错误时，我得到了下面的错误消息。

| {"name":"Angular","message":"Converting circular structure to JSON","path":"/","stack":"readableObjectToString()@/var/www/angular/dist/server.js:156940:63\nresolvePromise()@/var/www/angular/dist/server.js:157090:69\nresolvePromise()@/var/www/angular/dist/server.js:157056:17\n{anonymous}()@/var/www/angular/dist/server.js:157139:17\nZoneDelegate.invokeTask()@/var/www/angular/dist/server.js:156702:31\nObject.onInvokeTask()@/var/www/angular/dist/server.js:10745:33\nZoneDelegate.invokeTask()@/var/www/angular/dist/server.js:156701:36\nZone.runTask()@/var/www/angular/dist/server.js:156469:47\ndrainMicroTaskQueue()@/var/www/angular/dist/server.js:156876:35"}
angular_1   | Unhandled Promise rejection: HttpErrorResponse {
angular_1   |   headers: HttpHeaders { normalizedNames: Map {}, lazyUpdate: null, headers: Map {} },
angular_1   |   status: 0,
angular_1   |   statusText: 'Unknown Error',
angular_1   |   url: null,
angular_1   |   ok: false,
angular_1   |   name: 'HttpErrorResponse',
angular_1   |   message: 'Http failure response for (unknown url): 0 Unknown Error',
angular_1   |   error: 
angular_1   |    ProgressEvent {
angular_1   |      type: 'error',
angular_1   |      target: 
angular_1   |       XMLHttpRequest {
angular_1   |         onloadstart: null,
angular_1   |         onprogress: null,
angular_1   |         onabort: null,
angular_1   |         onerror: null,
angular_1   |         onload: null,
angular_1   |         ontimeout: null,
angular_1   |         onloadend: null,
angular_1   |         _listeners: [Object],
angular_1   |         onreadystatechange: null,
angular_1   |         _anonymous: undefined,
angular_1   |         readyState: 4,
angular_1   |         response: null,
angular_1   |         responseText: '',
angular_1   |         responseType: 'text',
angular_1   |         responseURL: '',
angular_1   |         status: 0,
angular_1   |         statusText: '',
angular_1   |         timeout: 0,
angular_1   |         upload: [Object],
angular_1   |         _method: 'GET',
angular_1   |         _url: [Object],
angular_1   |         _sync: false,
angular_1   |         _headers: [Object],
angular_1   |         _loweredHeaders: [Object],
angular_1   |         _mimeOverride: null,
angular_1   |         _request: null,
angular_1   |         _response: null,
angular_1   |         _responseParts: null,
angular_1   |         _responseHeaders: null,
angular_1   |         _aborting: null,
angular_1   |         _error: null,
angular_1   |         _loadedBytes: 0,
angular_1   |         _totalBytes: 0,
angular_1   |         _lengthComputable: false },
angular_1   |      currentTarget: 
angular_1   |       XMLHttpRequest {
angular_1   |         onloadstart: null,
angular_1   |         onprogress: null,
angular_1   |         onabort: null,
angular_1   |         onerror: null,
angular_1   |         onload: null,
angular_1   |         ontimeout: null,
angular_1   |         onloadend: null,
angular_1   |         _listeners: [Object],
angular_1   |         onreadystatechange: null,
angular_1   |         _anonymous: undefined,
angular_1   |         readyState: 4,
angular_1   |         response: null,
angular_1   |         responseText: '',
angular_1   |         responseType: 'text',
angular_1   |         responseURL: '',
angular_1   |         status: 0,
angular_1   |         statusText: '',
angular_1   |         timeout: 0,
angular_1   |         upload: [Object],
angular_1   |         _method: 'GET',
angular_1   |         _url: [Object],
angular_1   |         _sync: false,
angular_1   |         _headers: [Object],
angular_1   |         _loweredHeaders: [Object],
angular_1   |         _mimeOverride: null,
angular_1   |         _request: null,
angular_1   |         _response: null,
angular_1   |         _responseParts: null,
angular_1   |         _responseHeaders: null,
angular_1   |         _aborting: null,
angular_1   |         _error: null,
angular_1   |         _loadedBytes: 0,
angular_1   |         _totalBytes: 0,
angular_1   |         _lengthComputable: false },
angular_1   |      lengthComputable: false,
angular_1   |      loaded: 0,
angular_1   |      total: 0 } } ; Zone: angular ; Task: Promise.then ; Value: HttpErrorResponse {
angular_1   |   headers: HttpHeaders { normalizedNames: Map {}, lazyUpdate: null, headers: Map {} },
angular_1   |   status: 0,
angular_1   |   statusText: 'Unknown Error',
angular_1   |   url: null,
angular_1   |   ok: false,
angular_1   |   name: 'HttpErrorResponse',
angular_1   |   message: 'Http failure response for (unknown url): 0 Unknown Error',
angular_1   |   error: 
angular_1   |    ProgressEvent {
angular_1   |      type: 'error',
angular_1   |      target: 
angular_1   |       XMLHttpRequest {
angular_1   |         onloadstart: null,
angular_1   |         onprogress: null,
angular_1   |         onabort: null,
angular_1   |         onerror: null,
angular_1   |         onload: null,
angular_1   |         ontimeout: null,
angular_1   |         onloadend: null,
angular_1   |         _listeners: [Object],
angular_1   |         onreadystatechange: null,
angular_1   |         _anonymous: undefined,
angular_1   |         readyState: 4,
angular_1   |         response: null,
angular_1   |         responseText: '',
angular_1   |         responseType: 'text',
angular_1   |         responseURL: '',
angular_1   |         status: 0,
angular_1   |         statusText: '',
angular_1   |         timeout: 0,
angular_1   |         upload: [Object],
angular_1   |         _method: 'GET',
angular_1   |         _url: [Object],
angular_1   |         _sync: false,
angular_1   |         _headers: [Object],
angular_1   |         _loweredHeaders: [Object],
angular_1   |         _mimeOverride: null,
angular_1   |         _request: null,
angular_1   |         _response: null,
angular_1   |         _responseParts: null,
angular_1   |         _responseHeaders: null,
angular_1   |         _aborting: null,
angular_1   |         _error: null,
angular_1   |         _loadedBytes: 0,
angular_1   |         _totalBytes: 0,
angular_1   |         _lengthComputable: false },
angular_1   |      currentTarget: 
angular_1   |       XMLHttpRequest {
angular_1   |         onloadstart: null,
angular_1   |         onprogress: null,
angular_1   |         onabort: null,
angular_1   |         onerror: null,
angular_1   |         onload: null,
angular_1   |         ontimeout: null,
angular_1   |         onloadend: null,
angular_1   |         _listeners: [Object],
angular_1   |         onreadystatechange: null,
angular_1   |         _anonymous: undefined,
angular_1   |         readyState: 4,
angular_1   |         response: null,
angular_1   |         responseText: '',
angular_1   |         responseType: 'text',
angular_1   |         responseURL: '',
angular_1   |         status: 0,
angular_1   |         statusText: '',
angular_1   |         timeout: 0,
angular_1   |         upload: [Object],
angular_1   |         _method: 'GET',
angular_1   |         _url: [Object],
angular_1   |         _sync: false,
angular_1   |         _headers: [Object],
angular_1   |         _loweredHeaders: [Object],
angular_1   |         _mimeOverride: null,
angular_1   |         _request: null,
angular_1   |         _response: null,
angular_1   |         _responseParts: null,
angular_1   |         _responseHeaders: null,
angular_1   |         _aborting: null,
angular_1   |         _error: null,
angular_1   |         _loadedBytes: 0,
angular_1   |         _totalBytes: 0,
angular_1   |         _lengthComputable: false },
angular_1   |      lengthComputable: false,
angular_1   |      loaded: 0,
angular_1   |      total: 0 } } undefined

下面是我的船坞-Compose.yml

version: '3'
services:

  laravel:
    build: ./laravel/docker/php
    depends_on:
      - database
    expose:
      - 9000  
    volumes:
      - ./laravel:/var/www/laravel
      - $HOME/.composer/:$HOME/.composer/
    environment:
      - "DB_HOST=database"    #mysql service name - database
      - "DB_DATABASE=homestead"
      - "DB_USERNAME=homestead"
      - "DB_PASSWORD=homestead"
      - "REDIS_HOST=cache"
      - "REDIS_PORT=6379"
      - "APP_URL=http://app.lo"

  angular:
    build: ./angular
    expose:
      - 3000
    volumes:
      - ./angular:/var/www/angular 
    depends_on:
      - laravel

  web:
    build: ./nginx
    volumes:
      - ./:/var/www/
    ports:
      - 80:80
      - 443:443
    links:
      - laravel:laravel
      - angular:angular
    depends_on:
      - laravel
      - angular
    environment:
      - VIRTUAL_HOST=app.lo, portal.app.lo , api.app.lo, shop.app.lo  

  database:
    build: ./laravel/docker/mariadb
    environment:
      - "MYSQL_ROOT_PASSWORD=secret"
      - "MYSQL_DATABASE=homestead"
      - "MYSQL_USER=homestead"
      - "MYSQL_PASSWORD=homestead"
    ports:
      -  3306:3306

  mongodb:
   image: mongo:latest
   container_name: mongo
   restart: always
   volumes:
     -  mongo:/data/db
   ports:
      - 27017:27017
   command: --storageEngine wiredTiger

  cache:
    image: redis:4.0-alpine
    command: redis-server --appendonly yes
    ports:
      - 6379:6379
  nodejs:
    build: ./laravel/docker/nodejs
    volumes:
      - ./:/var/www/laravel

volumes:
  mysqldata:
  mongo:

networks:
  default:
    external:
      name: nginx-proxy 

Nginx vhost配置

server {
    listen   80; ## listen for ipv4; this line is default and implied
    server_name app.lo;

    location / {
       proxy_pass http://angular:3000;
       proxy_http_version 1.1;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection 'upgrade';
       proxy_set_header Host $host;
       proxy_cache_bypass $http_upgrade;
    }
}

server {
    listen   80; ## listen for ipv4; this line is default and implied
    index index.php index.html;
    root /var/www/laravel/public;
    client_max_body_size 32M;
    server_name  portal.app.lo api.app.lo shop.app.lo; 

    location / {
        try_files $uri $uri /index.php?$args;
    }

    location ~ \.php$ {
          try_files $uri /index.php =404;
                fastcgi_split_path_info ^(.+\.php)(/.+)$;
                fastcgi_pass laravel:9000;
                fastcgi_index index.php;
                fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
                include fastcgi_params;
    }
}

Answer 1

这是由于防火墙规则。在下面运行命令可以解决这个问题。

sudo ufw allow http 
sudo ufw allow https

有关更多详细信息，请查看github问题