Angular 13部署至GitHub Pages后未使用proxy.conf指定的target DNS

问题根源 #

proxy.conf.json是Angular CLI提供的本地开发代理配置，仅在ng serve启动的开发服务器中生效——开发服务器会帮你转发请求到目标后端。但部署到GitHub Pages后，应用是纯静态资源，没有代理服务器处理请求转发，所以所有API请求会默认发送到当前页面的域名（即GitHub Pages的https://myusername.github.io）。

解决方案 #

方案1：通过环境变量配置API根地址

直接在代码中指定生产环境的API地址，避免依赖本地代理：

1. 修改环境配置文件
   • 本地开发环境（src/environments/environment.ts）：

     export const environment = {
       production: false,
       apiBaseUrl: 'https://example.com'
     };
     

   • 生产环境（src/environments/environment.prod.ts）：

     export const environment = {
       production: true,
       apiBaseUrl: 'https://example.com'
     };
     

2. 在HTTP请求中使用环境变量
   替换原来的相对路径请求，改用完整API地址：

   import { environment } from '../environments/environment';
   
   // 示例：发起GET请求
   this.http.get(`${environment.apiBaseUrl}/panel/data`).subscribe(response => {
     // 处理响应
   });
   

3. 构建生产版本
   执行以下命令构建（Angular 13支持指定生产配置）：

   ng build --configuration production --base-href "/你的仓库名/"
   

   （如果是用户主页仓库myusername.github.io，无需添加--base-href）

方案2：配置Spring后端允许跨域请求

由于GitHub Pages域名和你的后端域名不同，直接请求会触发跨域问题，需要在Spring后端配置CORS规则：

1. 全局CORS配置（推荐）
   创建配置类允许GitHub Pages域名访问：

   @Configuration
   public class CorsConfiguration implements WebMvcConfigurer {
       @Override
       public void addCorsMappings(CorsRegistry registry) {
           registry.addMapping("/panel/**")
                   .allowedOrigins("https://myusername.github.io")
                   .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                   .allowedHeaders("*")
                   .allowCredentials(true);
       }
   }
   

2. 局部接口配置
   如果只需要开放特定接口，可在Controller方法或类上添加@CrossOrigin注解：

   @CrossOrigin(origins = "https://myusername.github.io")
   @RestController
   @RequestMapping("/panel")
   public class PanelController {
       // 接口实现
   }
   

注意事项 #

• 生产环境避免使用allowedOrigins("*")，尽量指定具体的GitHub Pages域名，提升安全性。
• 构建时的--base-href参数要和GitHub Pages的仓库路径匹配，否则路由会出现404问题。

内容的提问来源于stack exchange，提问作者Abdul-Qader Haddad