当我使用 ng build 时，proxy.config.json 在 Angular 4/5 中不起作用答案

【问题标题】：proxy.config.json is not working in Angular 4/5 when i use ng build当我使用 ng build 时，proxy.config.json 在 Angular 4/5 中不起作用
【发布时间】：2018-08-01 22:06:27
【问题描述】：

我正在为 API 调用使用代理 api 设置，如本网站所述。https://juristr.com/blog/2016/11/configure-proxy-api-angular-cli/ 当我使用 npm start 时，这可以正常工作。但是当我构建它并将其托管在 IIS 上时。它不工作。我相信 proxy.config.json 没有添加到 dist 文件夹中。

【问题讨论】：

标签： angular build

【解决方案1】：

我和你面临同样的问题。我的 proxy.config.json 在我的开发环境中工作，但在 PROD 环境中无法工作，即使我使用 build --prod 构建

找到方法后，我找到了一个用中间件制作代理后端的解决方案（在我的案例中我使用了 Nginx）。

如果你也使用过 Nginx，你可以通过将它配置到你的 nginx 配置中来做代理后端。

nginx.conf

location /api/ {
  proxy_pass      http://127.0.0.1:8087; 
  #all incoming http request with /api/ will be forwarded to http://127.0.0.1:8087/api/
}

【讨论】：

非常感谢。
@Arul，我的解决方案对你有用吗？如果是，请您标记我的答案并投票。谢谢
@S34N 了解更多信息。如果位置端点不以 / 结尾（/api 不是 /api/）。所有带有 /api 的传入请求都将转发到根 proxy_pass 端点。例如上面的规则将被转发到http://127.0.0.1:8087
谢谢，它拯救了我的一天。
网络详情中的详细信息，将有2跳的网络呼叫。 1. Client -> Nginx server with GET - /api/ 2. Nginx 收到来自 /api/ 的流量，匹配规则为 /api/，它将将此请求转发到 > 127.0.0.1:8087/api 我花了我 3 年的开发时间& infra 来了解 proxy_pass 的真实概念。希望对大家有所帮助。

【解决方案2】：

当开发服务器处于活动状态时，代理正在工作。 ng build 不启动开发服务器，此命令仅构建项目。因此，您不能在组装项目中使用代理。您可以使用 ng serve --proxy-config proxy.config.json --prod 之类的东西在带有代理的 prod 环境中进行测试

如果您需要在生产中使用另一个基本 url，您可以使用HttpInterceptor。只需创建这样的服务

@Injectable()
export class InterceptorsService implements HttpInterceptor {

    intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
      const proxyReq = req.clone({ url: `${ BASE_PATH }${ request.url }` });
      return next.handle(proxyReq);
    }
}

并将其添加到模块中的提供程序

...
providers: [
    { provide: HTTP_INTERCEPTORS, useClass: InterceptorsService, multi: true }, ...
]
...

【讨论】：

我需要一些其他方法来在 IIS 中部署构建代码。谢谢
检查我的答案的变化。是你需要的吗？
感谢您的帮助。我是 Angular 的初学者，我无法理解您的建议。我的服务网址将是 http:Asfgk005i:8000/api/name?courseId="embeded"。由于服务不工作，我在“proxy.config.json”中使用了“http:Asfgk005i:8000”。在服务组件中，我有 http.get("/api/name?courseId="embeded"")。现在如何根据您的代码重构它。
InterceptorService 拦截来自您应用的所有请求并对其进行修改。如果您需要在所有请求中将基本 url 从 http://your-domain 更改为 http://Asfgk005i:8000，则将我的示例中的 BASE_PATH 更改为 http://Asfgk005i:8000。另一种方法是在您的服务中使用完整的 url。您可以保存常量export const BASE_URL = 'http://Asfgk005i:8000' 并将其添加到所有网址之前：http.get(BASE_URL + "/api/name?courseId="embeded"")
嗨，我使用了您提供的第二种方法，但现在它显示“请求的资源上不存在'Access-Control-Allow-Origin'标头”。

【解决方案3】：

此配置仅用于您的开发设置，不应在生产中使用。您需要包含其他解决方案才能让您的生产环境运行。

【讨论】：

你能建议我一些替代解决方案吗？有没有其他方法可以添加这个代理
是的，您可以在生产中使用它。如何？我设置了一个转发到 java 微服务的 Angular 应用程序。 1. 严格允许angular-app从Angular app跨域到java网关微服务。 2. 在 Angular 应用程序和微服务之间添加安全内存身份验证（身份验证和授权）。（案件结案）。