Angular 没有使用 api 服务器答案

【问题标题】：Angular is not using the api serverAngular 没有使用 api 服务器
【发布时间】：2018-02-20 14:06:25
【问题描述】：

我刚开始使用 Angular 4 和 Spring Boot Web 应用程序。我正在尝试调用 REST 路径：

ngOnInit(): void {
  // Make the HTTP request:
  this.http.get('/greeting').subscribe(data => {
    // Read the result field from the JSON response.
    this.results = data['results'];
  });
}

但生成的 URL 是 GET http://localhost:4200/greeting 404 (Not Found)。我研究过这个主题，很多建议是为 NPM 添加一个代理文件，以便更改路由。

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

还有proxy.conf.json 文件：

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

当我运行 npm run start 时，我收到以下消息：

movie-seat@0.0.0 开始
C:\Users\alucardu\Documents\projects\movieseat\frontend\src\main\frontend> ng 服务 --proxy-config proxy.conf.json

Live Development Server 正在监听 localhost:4200，打开浏览器http://localhost:4200/ **

所以代理文件被加载了但是没有效果。我是在使用过时的信息还是只是做错了什么？

【问题讨论】：

我不知道你到底在做什么，但你不能给get调用一个完整的URL吗？
现在生成的 URL 是什么？
@marouane kadiri 你错了。如果您想调用本地 api，您的服务器可能在另一个端口上运行，因此您需要代理。它还可以让您避免使用完整 URL 时遇到的同源策略问题
@Arkej 如问题所述。生成的 url 是 http://localhost:4200/greeting，所以它正在执行来自 NPM 服务器的请求。
尝试将您的proxy.conf.json 中的/api 更改为/*

标签： angular

【解决方案1】：

我只是偶然发现了这个答案 > Redirect Angular2 http requests through proxy。并添加这一行：

"pathRewrite": {"^/api" : ""}

到 proxy.conf.json 文件解决了我的问题。

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

我现在可以像这样调用函数：

getGreeting() {
  this.http.get('/greeting').subscribe(data => {
    // Read the result field from the JSON response.
    this.results = data['results'];
  });
}

它成功调用http://localhost:4200/greeting 并返回正确的标头。它似乎也“修复”了 CORS 问题。我不需要在我的 spring-boot 后端指定任何 CORS 代码。

【讨论】：

【解决方案2】：

你在init中调用了错误的路径

应该是这样的

ngOnInit(): void {
  // Make the HTTP request:
  this.http.get('./api/greeting').subscribe(data => {
    // Read the result field from the JSON response.
    this.results = data['results'];
  });
}

并在您的 proxy.config 中添加 *

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

【讨论】：

@PeterBoomsma 您刚刚在浏览器中尝试了该路径吗？它不会那样工作。你在你的项目中尝试过吗？我在我的项目中有准确的设置，它可以正常工作
我又检查了一些，发现了这个链接stackoverflow.com/questions/41488769/…。将 "pathRewrite": {"^/api" : ""} 添加到代理 conf 文件有效。而且我不需要将 /api 添加到 get url。
@PeterBoomsma 很高兴您对它进行了排序。虽然我不认为 pathRewrite 是问题解决者。我认为它已解决，因为您将 "/api/*" 更改为 /
它并没有真正确定我将该路径重命名为的内容。 /api/api/*.
我的意思是如果你完全删除了api

【解决方案3】：

我建议您的 Spring Boot 应用程序在端口 8080 上运行。只需将总 URL 写入 GET-Request：

this.http.get('http://localhost:8080/greeting').subscribe(data => {

如果要更改生产和测试环境的主机，请将主机作为常量排除在现有环境文件中并导入。然后你可以这样做：

this.http.get( PROD + '/greeting').subscribe

【讨论】：