如何让 angular2 路由工作并将 http 请求代理到另一台机器上的 rest api？

我在提供静态 html 文件的 nginx 服务器上有一个 angular2 Web 应用程序。我有一个单独的 rest api 托管在具有不同 IP 地址的不同机器上。我已在我的 nginx 配置文件中将位置设置为/以允许 angular2 路由正常工作。我还添加了一个位置/api/我希望它可以拦截任何 api 请求并将它们代理到我的后端 api。

我的 nginx conf 代理设置为 http://swapi.co用于测试目的。

events { 
  worker_connections  4096;  ## Default: 1024 
} 
 
http { 
  server { 
    listen       80; 
    server_name  localhost; 
 
    root   /usr/share/nginx/html; 
    index  index.html index.htm; 
    include /etc/nginx/mime.types; 
 
    location / { 
         # If you want to enable html5Mode(true) in your angularjs app for pretty URL 
         # then all request for your angularJS app will be through index.html 
         try_files $uri /index.html; 
    } 
 
    # /api will server your proxied API that is running on same machine different port 
    # or another machine. So you can protect your API endpoint not get hit by public directly 
    location /api/ { 
        proxy_pass http://swapi.co; 
        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; 
        proxy_set_header X-Real-IP $remote_addr; 
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    } 
 
    #Static File Caching. All static files with the following extension will be cached for 1 day 
    location ~* .(jpg|jpeg|png|gif|ico|css|js)$ { 
        expires 1d; 
    } 
  }  
} 

我的 angular2 服务

import { Injectable } from '@angular/core'; 
import { Http, Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 
 
@Injectable() 
export class Service { 
 
  private url: string = '/api/people/'; 
  constructor (private http: Http) {} 
 
  getPeople () { 
    return this.http.get(this.url) 
                  .map(res => res.json()); 
  } 
} 

任何帮助将不胜感激。

请您参考如下方法:

让它在我的开发环境中正确代理请求。添加到 http block 并指向上游 api 值的代理传递

upstream api { 
  server 192.168.0.15:9998; 
} 

完成配置:

events { 
  worker_connections  4096;  ## Default: 1024 
} 
 
http { 
 
  # Change this depending on environment 
  upstream api { 
    server 192.168.0.1:9998; 
  } 
 
  server { 
    listen       80; 
    server_name  localhost; 
 
    root   /usr/share/nginx/html; 
    index  index.html index.htm; 
    include /etc/nginx/mime.types; 
 
    location / { 
      # If you want to enable html5Mode(true) in your angularjs app for pretty URL 
      # then all request for your angularJS app will be through index.html 
      try_files $uri /index.html; 
    } 
 
    # /api will server your proxied API that is running on same machine different port 
    # or another machine. So you can protect your API endpoint not get hit by public directly 
    location /api { 
      proxy_pass http://api; 
      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; 
      proxy_set_header X-Real-IP $remote_addr; 
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
    } 
 
    #Static File Caching. All static files with the following extension will be cached for 1 day 
    location ~* .(jpg|jpeg|png|gif|ico|css|js)$ { 
      expires 1d; 
    } 
  } 
}