Angular 6应用启动报错：Cannot GET /secure/bootstrap-data 问题求助

看起来你遇到的核心问题是代理配置没生效，导致请求打到了Angular的开发服务器端口（4200）而不是后端的8000端口，同时请求路径的构建方式也可能存在问题。我来一步步帮你排查：

1. 先确认你用对了启动命令 #

你的package.json里start命令已经指定了--proxy-config proxy.conf.json和--port 4500，但浏览器显示请求到了localhost:4200，说明你大概率是直接运行了ng serve（默认用4200端口，且不会加载代理配置）。

解决方法：
停止当前的服务，改用npm start启动项目。启动后看CLI控制台，应该会看到类似这样的提示：

Proxy created: /secure -> http://localhost:8000
Proxy created: /__clockwork -> http://localhost:8000
** Angular Live Development Server is listening on 0.0.0.0:4500, open your browser on http://localhost:4500/ **

如果看到这些信息，说明代理已经成功加载。

2. 检查请求路径是否用了绝对URL #

看你bootstrapper.service.ts里的代码：

const url = this.settings.getBaseUrl() + 'secure/bootstrap-data';

如果settings.getBaseUrl()返回的是当前页面的完整URL（比如http://localhost:4200/），那拼接后的请求就是绝对路径，Angular的代理只会处理相对路径的请求，不会拦截绝对路径的请求。

解决方法：

• 直接改用相对路径：把代码改成const url = 'secure/bootstrap-data';
• 或者修改getBaseUrl()的实现，让它返回空字符串或者相对路径前缀（比如''或者'/'）

3. 优化代理配置，添加changeOrigin #

有时候后端服务会校验请求的Origin头，Angular代理默认不会修改这个头，导致后端拒绝请求。你可以在proxy.conf.json里添加changeOrigin: true：

{
  "/secure": {
    "target": "http://localhost:8000",
    "secure": false,
    "changeOrigin": true
  },
  "/__clockwork": {
    "target": "http://localhost:8000",
    "secure": false,
    "changeOrigin": true
  }
}

这个配置会把请求的Origin头改成目标服务器的地址（http://localhost:8000），解决大部分跨域和origin校验问题。

4. 验证后端服务是否正常 #

最后，先排除后端的问题：直接在浏览器里访问http://localhost:8000/secure/bootstrap-data，如果返回404，那说明后端的这个接口根本不存在，你需要先修复后端服务；如果返回正常的JSON数据，那问题就完全在Angular的代理或请求路径上。

按照这几步排查，应该能解决你的问题。如果还是不行，可以告诉我启动CLI的输出信息，以及settings.getBaseUrl()的具体实现，我再帮你进一步分析。

内容的提问来源于stack exchange，提问作者cilies38