Angular配置Proxy进行跨域（结合环境变量）

Angular 7 proxy 官方文档

• 问题场景:进行前端开发的时候本地开发是localhost:port , 没有在本地环境安装数据库和后端程序等,api直接请求的是另一台服务器上的地址,比如http://my.domain:port,此时浏览器出于跨域策略的问题会拦截api,因此开发的时候需要配置项目的跨域

Angular跨域可以通过配置proxy.conf.json或者proxy.conf.js来进行跨域

一　创建文件,并配置到angular.json中

１．在项目中创建文件，文件名为proxy.conf.json或者proxy.conf.js

以js为例

２．在angular.json中配置proxyConfig

        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "material-admin2:build",
            "proxyConfig": "proxy.conf.js"
/*配置在此,proxy.conf.json就直接替换
,因为proxy文件我的项目中与angular在同级,
如果放在其他文件夹的话自行
根据angular.json的位置去修改proxy文件的路径*/
          },
          "configurations": {
            "production": {
              "browserTarget": "XXXXX:build:production"
            }
          }
        },

3.proxy的具体内容

• proxy.conf.json

配置json文件,对于api配置需求比较简单的可以直接写死在json中

配置的时候

对于前缀相同的两个不同api存在问题,

如果把短的放在长的前面,会导致长api无法找到对应的target

比如这个顺序下,fkg请求的时候会出错

"/admin/api": {
"target": "http://xxx.domain:port",
"secure": false
},
"/admin/api/fkg":{
"target": "http://xxx.domain:port",
"secure": false,
"changeOrigin": true   //请求地址非localhost,此属性设置为true
}

位置对调之后就正常了

{
 "/admin/api/fkg":{
    "target": "http://xxx.domain:port",
    "secure": false,
    "changeOrigin": true   //请求地址非localhost,此属性设置为true
    },
    "/admin/api": {
        "target": "http://xxx.domain:port",
        "secure": false
    },
    "/api": {
        "target": "http://xxx.domain:port",

        "secure": false
    },
    "/media": {
        "target": "http://xxx.domain:port",
        "secure": false
    }
}

配置完后,npm start后会自动proxy到配置中target地址

• proxy.conf.js

当跨域的地址要从变量获取的时候可以用proxy.conf.js

我使用proxy.conf.js的场景之一,是希望通过环境变量来获取到当前要跨域的proxy.conf.js

这样在不同环境下运行的时候,只需要修改环境变量的地址就可以

node.js中可以通过process.env获取用户环境信息 process.env

var proxyConfig =  [
    {
        context: [
            "/admin/api/fkg",
            "/admin/api",
            "/api",
            "/media"
        ],
        target:"http://127.0.0.1:8000",
        secure: false,
        changeOrigin:true
    }
]
function setupForCorporateProxy(proxyConfig) {
  var proxyServer = process.env.http_proxy || process.env.HTTP_PROXY;
  console.log('Using corporate proxy server: ' + proxyServer);
  if (proxyServer) {
    proxyConfig.forEach(function(entry) {
      entry.target = proxyServer;
    });
  }
  return proxyConfig;
}

module.exports = setupForCorporateProxy(proxyConfig);

• linux:

在Terminal中设置process.env.http_proxy,设置只在当前Terminal生效

echo http_proxy #查看是否设置了http_proxy,没有设置的话返回http_proxy 
export http_proxy= 'your address' #设置http_proxy

运行命令:npm run dev每次就可以自动进行跨域了,如果地址变了只需要改指令中的地址即可