带有 Angular 的 CORS 起源答案

【问题标题】：CORS Origin with Angular带有 Angular 的 CORS 起源
【发布时间】：2021-02-09 22:37:25
【问题描述】：

我在 Angular 上遇到 CORS Origin 的问题...我的项目部署在 DigitalOcean 上的 kluster kubernetes 中。

例如，我可以使用此服务：http://167.172.13.45:8889（它可以与 Postman 一起使用）。

我在 Angular 8 中的服务

@Injectable()
export class CategoriesService {

  public apiUrl: string;

  private categories:string = environment.categories;

  constructor(private http: HttpClient) { }
  
  getAllCategories(page:number){
    return this.http.get(this.categories+"/public/v1");
  }
}

我的环境

导出常量环境 = { 生产：假，类别：'/类别' };

还有我的代理...

{
    "/categories/*": {
      "target": "http://167.172.13.45:8889",
      "secure": true,
      "logLevel": "debug",
      "changeOrigin": true
    }
  }

任何人都可以发现或尝试帮助我吗？为什么不工作我自己的项目？来自 digitalocean 的任何 Kubernetes 使用指南。

【问题讨论】：

如您所知，角度代理仅适用于 ng serve 开发服务器..
:( :( ，还有什么替代品？
CORS 需要在服务器端修复.. 添加正确的标头。大量的东西要找到..

标签： angular kubernetes digital-ocean

【解决方案1】：

我在 My SpringBoot Projects 中添加以下类解决了这个问题。

@Component
public class XClacksOverhead implements Filter {
    
  @Override
  public void doFilter(ServletRequest req, ServletResponse res,
      FilterChain chain) throws IOException, ServletException {

      HttpServletResponse response = (HttpServletResponse) res;
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
        response.setHeader("Access-Control-Allow-Methods", "GET,POST,PATCH,DELETE,PUT,OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "*");
        response.setHeader("Access-Control-Max-Age", "86400");
        chain.doFilter(req, res);
  }

  @Override
  public void destroy() {}

  @Override
  public void init(FilterConfig arg0) throws ServletException {}

}

【讨论】：