Angular代理在根级别

Question

Angular代理在根级别

angularwebpackwebpack-dev-server

9

我有一个使用Angular编写的应用程序和一个使用jQuery编写的落地页。

我希望每次在根目录下访问 `http://mywebsite.com` 时提供落地页，而对于其他地址如 `http://mywebsite.com/otherpage`，则提供 Angular 应用程序。

在使用 `nginx`（生产环境）时，这很容易实现。

当开发 Angular 时，我们可以轻松使用 `--proxy-config proxy.config.json` CLI 选项代理其他请求，例如 `/api`。

问题出在根目录层级。

我做错了什么？不能代理根目录吗？ Angular 文档告诉我们去看 Webpack dev-server 文档，但我仍然无法弄清楚如何实现。

我的 `proxy.config.json` 如下所示:

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug"
  },
  "/": {
    "index": "",
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug"
  }
}

- Gustavo Lopes

4个回答

1

更新

以下解决方案在我撰写时有效，但似乎无法与后来的Webpack / Angular版本一起使用。

@Zygimantas在下面的评论中提出了一种解决方案，但很遗憾对我也不起作用。

我按照以下方式使其工作：

在angular.json中：

"architect": {
  "build": {
    "builder": "@angular-builders/custom-webpack:browser",
    "options": {
      "customWebpackConfig": {
        "path": "./my-custom-webpack.config.js"
      },

  ...

  "serve": {
    "builder": "@angular-builders/custom-webpack:dev-server",
    "options": {
      "proxyConfig": "webpack-proxy.conf.js",

  ...

在 my-custom-webpack.config.js 文件中：

module.exports = {
  ...
  devServer: {
    index: '' // Allows us to proxy the root URL
  }
}

在webpack-proxy.conf.js中

const PROXY_CONFIG = [{
  context: [
    '/'
  ],
  target: 'http://proxy-to-url',
  bypass: function(request) {
    // proxy the root URL, plus "/api/*" - otherwise serve using Angular
    return /^\/(api\/.*)?$/.test(request.url) ? null : '/index.html';
  },
  secure: false
}];

module.exports = PROXY_CONFIG;

（需要安装@angular-builders/custom-webpack： npm i -D @angular-builders/custom-webpack）

- Dan King

1

应该是 my-custom-webpack.config.js：module.exports = { devServer: { devMiddleware: { index: "", }, }, }; - Zygimantas

@Zygimantas 应该吗？为什么？对我来说上面的代码运行良好。 - Dan King

如果我不按照@Zygimantas的建议更改webpack.config.js，这个解决方案就无法工作。我猜他们在webpack中更改了配置。另请参阅文档：https://webpack.js.org/configuration/dev-server/#devserverproxy - LaurentG

哎呀 - webpack和/或Angular发生了变化，这意味着我上面的解决方案不再适用。我尝试使用@Zygimantas的解决方案，但对我也不起作用... :-( - Dan King

1

看起来最终是与根级别冲突了。

更换到其他级别后，我可以使其正常工作。

文档对此没有解释。

- Gustavo Lopes

1

如果将devServer.index设置为falsy值，则它可以正常工作。

https://webpack.js.org/configuration/dev-server/#devserver-proxy

请注意，默认情况下不会代理根路径的请求。要启用根代理，请将devServer.index选项指定为假值：

module.exports = {
    //...
    devServer: {
        index: '', // specify to enable root proxying
        host: '...',
        contentBase: '...',
        proxy: {
        context: () => true,
        target: 'http://localhost:1234'
        }
    }
};

- MicMro

在一个开箱即用的Angular应用程序中，你如何做到这一点？默认情况下似乎没有暴露devServer配置？ - Dan King

没关系 - 我已经想通了。我可以将 devServer 添加到我的 customWebpackConfig 中（使用 Angular 的 custom-webpack 构建工具）。 - Dan King

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- c0l3 · Accepted Answer

我有一个有效的代理配置，它只拦截根目录，而不是使用baseHref提供的angular应用程序。您需要使用一个.js配置(https://angular.io/guide/build#proxy-multiple-entries)，并为http-proxy-middleware定义一个排除项(https://github.com/chimurai/http-proxy-middleware#context-matching)。下面的配置代理每个请求，但不包括以/otherpage开头的请求。Angular应用程序应该使用'/otherpage'作为baseHref。

const PROXY_CONFIG = [
  {
    context: [
      "/**",
      "!/otherpage**"
    ],
    "target": "http://localhost:3000",
    "secure": false,
  }
];

module.exports = PROXY_CONFIG;