angular proxy 配置

在项目文件夹下创建proxy.config.json文件:

{
  "/api": {
    "target": "http://api-dev..com",
    "logLevel": "debug",
    "changeOrigin": true,
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    }
  },
  "/api/v1": {
    "target": "http://api-dev..com/v1",
    "logLevel": "debug",
    "changeOrigin": true,
    "secure": false,
    "pathRewrite": {
      "^/api/v1": ""
    }
  },
  "/api/common/v1": {
    "target": "http://api-dev..com/api/common/v1",
    "logLevel": "debug",
    "changeOrigin": true,
    "secure": false,
    "pathRewrite": {
      "^/api/common/v1": ""
    }
  }
}

调用接口:

const url = "http://localhost:4200/api/common/v1/xxxx"
//在调用的时候请求会被代理到:http://api-dev..com/api/common/v1/xxxx
this.http.get(url)   .then(response => {
  //逻辑处理
}).catch(error=>{
 //逻辑处理
});

package.json 配置:

"start":  "ng serve --host 0.0.0.0  --proxy-config proxy.config.json ",

运行代码:

npm run start

扩展 - 环境配置

environments 文件夹下创建environment.local.ts文件:

export const environment = {
  production: false,
  BASE_COMMON_URL:"http://localhost:4200/api/common/v1",
  BASE_URL:"http://localhost:4200/api/v1",
  BASE_API:"http://localhost:4200/api",
};

angular.json配置

{
  ...//省略
  "projects": {
    "your-project-name": {
      ...//省略
      "architect": {
        "build": {
          ...//省略
          "configurations": {
            "production": {
                  ...//省略
              },
            "local": {//增加代码
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.local.ts"
                }
              ]
            }
          }
        },
        "serve": {
          ...//省略
          "configurations": {
            "production": {
              "browserTarget": "new-m2-frontend:build:production"
            },
            "local": {//增加代码
              "browserTarget": "your-product-name:build:local"
            }
          }
        },
      ...//省略
}

package.json

 "proxy":  "ng serve --host 0.0.0.0  --proxy-config proxy.config.json --configuration=local",

运行代码:

npm run proxy

这样你的修改对其他人的影响就降到最低了

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 工作空间的配置文件用途:angular.json:为工作区中的所有项目指定CLI的默认配置,包括CLI要用到的构建...
    我不傻_cyy阅读 386评论 0 0
  • ## 1. 说明: github: https://github.com/angular/angular-cli ...
    程序猿吴阅读 451评论 0 0
  • 一 Angular CLI 是啥 Angular CLI 是一个命令行接口(Angular Command ...
    tuacy阅读 16,294评论 0 2
  • 整体目录结构 一级目录(介绍主要的,我们会接触到的) node_modules 第三方依赖包存放目录。 src 应...
    天降男神阅读 1,337评论 0 1
  • 一、flux 1.介绍 flux和react都是facebook推出的产品 它的主要作用是在大型的react项目中...
    誩先生阅读 1,175评论 0 0