angular前后端分离代理后端服务器

参考资料

1. angular官网

背景

你可以使用 webpack 开发服务器中的代理支持来把特定的 URL 转发给后端服务器，只要传入 --proxy-config 选项就可以了。 比如，要把所有到 http://localhost:4200/api 的调用都转给运行在 http://localhost:9999上的服务器，可采取如下步骤。(注意:本方案没有解决会话跨域的问题)

步骤

1. 在项目的根目录下创建一个 proxy.conf.json 文件，紧挨着 package.json。
   
2. 往这个新的代理配置文件中添加如下内容：

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

3. 在 CLI 配置文件 angular.json 中为 serve 目标添加 proxyConfig 选项：

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "./proxy.conf.json"
    },

我的配置

4. 要使用这个代理选项启动开发服务器，请运行 ng serve 命令

其它

重写 URL 路径

pathRewrite 代理配置项能让你在运行时重写 URL 路径。 比如，你可以在代理配置中指定如下的 pathRewrite 值，以移除路径末尾的 “api” 部分。

content_copy

  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    }
  }}

如果你要访问的后端不在 localhost 上，还要设置 changeOrigin 选项。比如：

{
  "/api": {
    "target": "http://npmjs.org",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    },
    "changeOrigin": true
  }}

要想了解你的代理是否在如预期般工作，可以设置 logLevel 选项。比如：

{
  "/api": {
    "target": "http://localhost:3000",
    "secure": false,
    "pathRewrite": {
      "^/api": ""
    },
    "logLevel": "debug"
  }}

代理的有效日志级别是 info（默认值）、debug、warn、error 和 silent。

代理多个条目

通过用 JavaScript 定义此配置，你还可以把多个条目代理到同一个目标。

将代理配置文件设置为 proxy.conf.js（代替 proxy.conf.json），并指定如下例子中的配置文件。

const PROXY_CONFIG = [
    {
        context: [
            "/my",
            "/many",
            "/endpoints",
            "/i",
            "/need",
            "/to",
            "/proxy"
        ],
        target: "http://localhost:3000",
        secure: false
    }]

module.exports = PROXY_CONFIG;

在 CLI 配置文件 angular.json 中，指向 JavaScript 配置文件：

content_copy
...
"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.js"
    },

绕过代理

如果你需要根据情况绕过此代理，或在发出请求前先动态修改一下，可以添加 bypass 选项，就像下例的 JavaScript 所示。

const PROXY_CONFIG = {
    "/api/proxy": {
        "target": "http://localhost:3000",
        "secure": false,
        "bypass": function (req, res, proxyOptions) {
            if (req.headers.accept.indexOf("html") !== -1) {
                console.log("Skipping proxy for browser request.");
                return "/index.html";
            }
            req.headers["X-Custom-Header"] = "yes";
        }
    }
}

module.exports = PROXY_CONFIG;

使用公司代理
如果你在公司代理后面工作，就无法直接代理到局域网之外的任何 URL。 这种情况下，你可以把这个后端代理配置为，借助 agent 通过你的公司代理转发此调用：

npm install --save-dev https-proxy-agent

如果你定义了环境变量 http_proxy 或 HTTP_PROXY，当运行 npm start 时，就会自动添加一个 agent 来通过你的企业代理转发网络调用。

请在 JavaScript 配置文件中使用如下内容。

var HttpsProxyAgent = require('https-proxy-agent');
var proxyConfig = [{
  context: '/api',
  target: 'http://your-remote-server.com:3000',
  secure: false
}];
 
function setupForCorporateProxy(proxyConfig) {
  var proxyServer = process.env.http_proxy || process.env.HTTP_PROXY;
  if (proxyServer) {
    var agent = new HttpsProxyAgent(proxyServer);
    console.log('Using corporate proxy server: ' + proxyServer);
    proxyConfig.forEach(function(entry) {
      entry.agent = agent;
    });
  }
  return proxyConfig;
}
 
module.exports = setupForCorporateProxy(proxyConfig);