如何在Angular中设置api proxy

在开发阶段, 我们的前端和后端可能分别运行在同一台机器的不同端口或同一个局域网内的不同ip上, 前端访问后端api时就会碰到跨域的场景.

这个时候我们可以通过在Augular中设置proxy来解决这个CrossDomain问题.

当然在之后正式发布时, 一般通过后端web服务器(如nginx)或后端代码配置来实现跨域控制.

以下是在Ionic/Angular中设置proxy代理的参考步骤:

(1) 创建proxy.conf.json配置文件

在package.json同一级目录下创建proxy.conf.json配置文件, 并加入如下内容:

{
  "/api": {
    "target": "http://localhost:8000",
    "secure": false
  }
}

其中/api表示所有以此作为请求URL开头的request, 都会被代理到真正的后端地址: http://localhost:8000, 这个后端地址根据你的实际情况来定义.

(2) 修改angular.json配置文件

如下增加一行配置"proxyConfig": "proxy.conf.json":

"serve": {
   "builder": "@angular-devkit/build-angular:dev-server",
   "options": {
     "browserTarget": "app:build",
     "proxyConfig": "proxy.conf.json"
   },
   "configurations": {
     "production": {
       "browserTarget": "app:build:production"
     }
   }
},

(3) 修改package.json中的启动配置,如下将:

    "start": "ng serve ",

修改为:

"start": "ng serve --proxy-config proxy.conf.json",

(4)重新启动ng进程

npm start

即可实现api请求代理的效果