带有环境变量的 Angular CLI 代理答案

【问题标题】：Angular CLI Proxy with env variables带有环境变量的 Angular CLI 代理
【发布时间】：2019-04-27 23:39:34
【问题描述】：

我需要为我的后端服务器创建一个代理以便与之通信。我已经成功设置了它，但是现在我有两个地方需要在更改环境时更改变量。

我的版本：

Angular CLI 7.0.6
角7.1.0

注意：我的代理正在工作（有关设置，请参阅Angular docs），我只想改进设置。

Proxy.conf.js

这是我当前（并且正在工作！）的 config.js

const PROXY_CONFIG = {
  "/api/*": {
    "target": "https://url.to.somewhere/",
    "logLevel": "debug",
    "changeOrigin": true
  }
};

module.exports = PROXY_CONFIG;

我希望将此文件与 Angular environment.ts 文件结合起来。

我想要什么

我想使用 environment.ts 文件中的变量来配置代理，所以我只需要维护我的 environment.ts 而不是两个文件（也是 proxy.conf.js）。

类似这样的事情：

import {env} from 'environments/environment';

const root = env.BASE_SUFFIX + '/*'; // BASE_SUFFIX = '/api'

function getConfig() {
  const PROXY_CONFIG = {};
  PROXY_CONFIG[root] = {
    target: env.API_URL, // API_URL = https://url.to.somewhere/
    logLevel: "debug",
    changeOrigin: true,
  };

  return PROXY_CONFIG;
}

module.exports = getConfig();

我目前遇到的问题是 environment.ts 是一个 Typescript 文件，无法被 javascript 正确包含，因为我的 environment.ts 文件中有一些 import {foo} from 'bar'。

由于 ES6 导入，const env = require(environments/environment.ts).env 无法正常工作。

关于我应该如何做到这一点的任何建议，或者这是不可能的，我应该只使用 2 个单独的文件吗？

【问题讨论】：

如果你在proxy.conf.json中使用代理配置，你只需要调用/api就可以了url.to.somewhere/api
你需要在我的项目的启动命令中添加你的代理配置文件我这样做了：“start”：“node node_modules/@angular/cli/bin/ng serve --host package.json 中的 0.0.0.0 --disable-host-check --proxy-config proxy.conf.json"
@Alann，我有一个工作设置，所以这不是问题。问题是我不想对文件中的变量进行硬编码，因为那样我将不得不在 2 个地方更改代码。我想在js文件中使用Angular environment.ts变量（不能使用.json，因为不支持变量）
@Alann 您在package.json (start) 中建议的设置不是 Angular 或 Angular-CLI 建议的方式，顺便说一句。请参阅我的帖子以获取有关如何设置它的 Angular 页面的链接。
为什么需要在两个地方更改“它”？使用代理后，您的所有 http 请求都应使用相对 URL，例如 /api/path/to/endpoint。如果有的话，您应该从 environment.ts 文件中删除 URL。

标签： javascript angular typescript proxy

【解决方案1】：

我就是这样用的。你可以试试这个

// 创建proxy.conf.json

{
  "/api/*": {
    "target": "http://localhost:8000",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

//在package.json文件“scripts”下找到“start”

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

// api调用

this.http.post('/api/api_name/')

【讨论】：