Question

我有一个Angular应用程序和一个用jQuery编写的登录页面。

每次请求位于http://mywebsite.com的根目录上时，我都希望提供目标网页。再说http://mywebsite.com/otherpage，我想为Angular应用程序提供服务。

使用nginx（生产），这非常容易。

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

我遇到的问题是与根级别有关。

我在做什么错？我不能代理根级别吗？

Angular docs告诉我们去Webpack dev-server docs，但我仍然不知道该怎么做。

我的proxy.config.json如下：

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

Answer 1

看起来毕竟是与根级别的冲突。

更改为其他级别，我可以使其正常工作。

文档对此没有解释。

Answer 2

我有一个有效的代理配置，该配置仅拦截根目录，而不拦截baseHref提供的有角度的应用程序。您需要使用.js配置（https://angular.io/guide/build#proxy-multiple-entries），并为http-proxy-middleware（https://github.com/chimurai/http-proxy-middleware#context-matching）定义了排除项。下面的配置代理以/otherpage开头的每个请求的期望值。角度应用程序应使用“ / otherpage”作为baseHref

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

module.exports = PROXY_CONFIG;

Answer 3

如果您将devServer.index设置为虚假值，则可以使用。

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

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

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

根级别的Angular代理

3 个答案: