Angular配置proxy代理

Posted 2023-03-26

参考技术A 前后端分离逐渐成为主流的开发方式，但同时也带来一些问题。在本地开发时，http请求通常需要从前端端口号转到后端端口号。处理跨域问题的方法有很多，如 CROS、 修改浏览器配置等，我比较喜欢proxy代理的方式。

假如Angular的请求为 http://localhost:4200/service/login ，经过proxy处理后，该请求变为 http://localhost:8080/login ，实现了自动跨域。
proxy配置项很多，可以参考 https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/proxy.md

当我使用 ng build 时，proxy.conf.json 在 Angular 6 中不起作用

【中文标题】当我使用 ng build 时，proxy.conf.json 在 Angular 6 中不起作用

【英文标题】：proxy.conf.json is not working in angular 6 when i use ng build

【发布时间】：2019-03-01 01:57:07

【问题描述】：

我正在尝试使用代理创建一个项目以连接到后端，但是当使用 ng build 生成项目时，代理配置不像使用 ng serve 那样工作。 要生成使用以下命令：

ng build --prod --base-href = / myproyect /

接下来我传递我拥有的配置文件： proxy.conf.json：

    "/api/*": 
      "target": "http://localhost:8080/cystock/",
      "secure": false,
      "pathRewrite": "^/api" : "",
      "changeOrigin": true,
      "logLevel": "debug"
    
  

global.ts：

export const GLOBAL = 
  production: true,
  url: 'api'//<-- 'API/' prefix needed for proxy configuration 
;

注意：这个想法是能够消费localhost服务，这是使用JAVA开发的，使用Spring作为框架

【问题讨论】：

proxy 配置旨在通过ng serve 运行开发服务器时代理调用。运行 ng build 后，您负责 Web 服务器及其配置

谢谢，问题是我不知道如何搜索运行配置，所以它可以工作

【参考方案1】：

正如@vikas 所说，代理配置严格用于开发。它可以让您在开发应用程序时轻松“模拟”您的端点，而无需多个配置文件。

proxy-config 的想法是您将生产 URL 代理到开发服务器（远程或本地），当您在没有代理的情况下构建代码时，它指向您的生产服务器。

要专门解决您的问题，只需将 /api 更改为您的生产端点，并将其映射到开发服务器。