采用Angular开发,部署的时候有两种方式:第一种是把打包后的文件直接发布到站点根目录下面,这种情况Angular的项目将作为一个独立的网站,那么必然会面对跨域的问题;第二种是把Angular打包后的文件放到站点根目录下的某个文件夹,这种情况不需要跨域,但是需要对路径做相关的配置。这里先讨论第一种情况。

一、开发环境

可以通过代理跨域,在angular项目中

1)在项目根目录新建proxy.config.json;

2)跟上面的proxyTable 一样配置好;

3)执行命令ng serve –proxy-config proxy.config.json即可

4)可以在package.json里配置下

“scripts”: { “start”: “ng serve –proxy-config proxy.config.json” }, 然后执行npm run start

二、生产环境

上面的方式可以解决我们在Angualr项目中开发环境的跨域问题,但是无法解决生产环境上的跨域问题,有的时候生产环境上也需要处理跨域问题,这个时候proxyTable是不行的,需要通过Nginx或者IIS反向代理(你没有看错,IIS反向代理,而且效率也很高,下一篇我会讨论)。

反向代理作用

1) http服务器,可以独立提供http服务;

2) 虚拟主机:多个域名指向同一个服务器,服务器根据不同的域名把请求转发到不同的应用服务器;

3) 反向代理:负载均衡,将请求转发至不同的服务器

nginx的相关配置

location / { root D:\cross-demo\dist #直接指向打包后的文件 index index.html index.htm; }

location /api/ { proxy_pass http://localhost:8888/; # 将地址代理到api上 }