01
7

Angular项目部署和跨域问题

0
归档:2019年7月分类:前端技术
内容纲要

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


声明: 本文采用 BY-NC-SA 协议进行授权. 未标注“转”的文章均为原创,转载请注明转自: Angular项目部署和跨域问题

公告栏

欢迎大家来到我的博客,我是dodoro,希望我的博客能给你带来帮助。