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

Posted 2023-02-19

【中文标题】与前端和后端的错误通信（Java - Angular）

【英文标题】：Wrong communication with Frontend and backend (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。

【参考方案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);