与前端和后端的错误通信（Java - Angular）答案

【问题标题】：Wrong communication with Frontend and backend (Java - Angular)与前端和后端的错误通信（Java - Angular）
【发布时间】：2018-02-19 23:32:21
【问题描述】：

我尝试将我的 Angular 前端与我的 Java/Spring Boot 后端进行通信。但是终端向我显示了这个错误：

[HPM] 尝试将请求 /api/dados 从 localhost:4500 代理到 http:/localhost:8080 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors) 时发生错误

这是我的 example.service.ts (Angular) 代码。这里我请求数据：

import {Injectable} from "@angular/core";
import {Http, Response} from "@angular/http";
import 'rxjs/Rx';

@Injectable()
export class ExService{
  constructor(private http: Http){

  }

  getName(){
    return this.http.get("/api/dados").map(
      (response: Response) =>{
        return response.json();
      }
    );
  }
}

这是我的 example.java（Java 代码）。它负责发送数据：

package com.lucas.bef.Envia;

import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
@RequestMapping("/api/dados")
public class Dados {
    String teste;

    public Dados(){
        this.teste = "LUCAS";
    }

    public void setNome(String nome){
        this.teste = nome;
    }

    @GetMapping( value = {"","/"})
    public String getNome(){
        return teste;
    }
}

如果我启动 Spring Application... 终端会显示一条消息 Tomcat start in 8080 port。

我像这样创建一个配置代理文件（proxy-conf.json）：

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

请有人帮助我。我需要这样做。非常重要。谢谢！

【问题讨论】：

请edit 告诉我们更多关于如何在本地主机上设置服务器的问题。根据您的错误消息，端口 4500 上的代理服务器没有将您的操作中继到 8080 上的服务器。
@O.Jones 如果我执行 npm 启动 Angular.cli 在 localhost 4500 中运行。或者默认为 4200。但是。 Spring Boot 程序（我的后端）在 8080 端口运行 Tomcat Apache。

标签： node.js angular spring-boot angular-http

【解决方案1】：

问题似乎在于您同时运行两个应用程序（前端和后端）在不同的端口上。这样的请求称为CORS。您可以在 Spring-Boot App 中启用 cors，例如 this。或者临时测试请下载这个chromeplugin

【讨论】：

【解决方案2】：

首先你已经设置了“target”：“http://localhost:8080”，错了！是http://localhost:8080

另外请尝试像这样重写来自服务的请求

 getName(){
    return this.http.get("http://localhost:8080/api/dados").map(
      (response: Response) =>{
        return response.json();
      }
    );
  }

检查它是否工作！您必须从服务方法订阅 Observable 响应

您还必须允许您的 spring 服务器与 Angular 应用程序进行通信。为此，您必须从后端配置 CORS

import java.io.IOException;
import javax.servlet.FilterChain;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.springframework.web.filter.GenericFilterBean;


public class CORSFilter extends GenericFilterBean {

  @Override
  public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
      throws IOException, ServletException {

    if (((HttpServletRequest) req).getMethod().equals("OPTIONS")) {

      HttpServletResponse response = (HttpServletResponse) res;
      response.setHeader("Access-Control-Allow-Origin", "http://localhost:4500");
      response.setHeader("Access-Control-Allow-Credentials", "true");
      response.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT,DELETE");
      response.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, "
            + "X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");

    } else {

      chain.doFilter(req, res);

    }
  }
}

【讨论】：