Angular 应用解决跨域访问的问题

在先后台分离的应用中，Angular 与 Java 是一对好搭档。可是若是是分开部署应用，则势必会遇到跨域访问的问题。

什么是跨域

启动应用以后，有些浏览器会提示以下告警信息：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

这个是典型的跨域问题。浏览器为了安全考虑，不一样的域之间是不可以互相访问的的。

好比，Angular 应用部署在本地的4200端口，而 Java 服务部署在8080端口，他们虽然是同台机子，但仍然是不一样的域。Angular 应用视图经过HttpClient 去访问 Java 的 http://localhost:8080/hello 接口是不容许的。

如何解决跨域问题

在知道了什么是跨域以后，解决方案就有多种。

1. 避免跨域

既然，分开部署致使了跨域，那么最简单的方式莫过于避免分开部署，即Angular 与 Java 同时部署到同个 Web 服务器中。

这种方式部署在传统的 Java Web 中很是常见。好比，JSP 应用。

但带来的问题是，水平扩展和性能调优将变得困难，不适合大型互联网应用。

2. 安装支持跨域请求的插件

其实，不少浏览器都提供了容许跨域访问的插件，只需启用这种插件，就能实如今开发环境跨域请求第三方 API 了。

下图展现的是在 Firefox 浏览器中可以实现的跨域访问的插件。

这种方式是最简单，但使用的场景比较受限，通常用于开发环境。

3. 设置反向代理

这种方式是业界最为经常使用的方式，原理是设置反向代理服务器，让 Angular 应用都访问本身的服务器中的API，而这类API都会被反向代理服务器转发到 Java 服务API中，而这个过程对于 Angular 应用是无感知的。

业界常常是采用 NGINX 服务来承担反向代理的职责。而在 Angular 中，使用反向代理将变得更加简单。在 Angualr 应用的根目录下，添加配置文件proxy.config.json，并填写以下格式内容：

{
    "/lite": {
      "target": "http://localhost:8080",
      "secure": "false"
    }
}

使用 Angular CLI 启动应用时，只须要执行以下命令便可，很是方法：

ng serve --proxy-config proxy.config.json

这样，当 Angular 要访问http://localhost:4200/lite 时，会被转发到 Java 的 http://localhost:8080/lite 接口。

参考引用

• 原文同步至https://waylau.com/angular-proxy/
• Angular CLI 经常使用命令：https://my.oschina.net/waylau/blog/2874325
• Spring 5 开发大全：https://github.com/waylau/spring-5-book
• 跟老卫学Angular：https://github.com/waylau/angular-tutorial
• NGINX 教程：https://github.com/waylau/nginx-tutorial