采用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上
}