我无法通过 React 拨打休息电话

Question

我目前正在学习使用 React，但我遇到了一个问题：我想要 React 与我的 Java Spring 引导后端 (Tomcat) 一起工作。 React 在端口 3000（默认）上是运行，而我的服务器在端口 8080（默认）上是 Tomcat。现在，当我进行 REST 调用时，出现以下错误

script.js:13 GET http://localhost:8080/api/path?p=test net::ERR_CONNECTION_REFUSED

我的休息电话是这样的：

fetch('http://localhost:8080/api/path?p=test')
        .then(res => {
            console.log(res);
        });

我做错了什么？我真的不知道。

Answer 1

当您的前端（React 应用程序）无法连接到您的后端（您的 Spring 引导应用程序）时，通常会抛出 net::ERR_CONNECTION_REFUSED 错误。发生这种情况的可能原因有很多，例如：

您的back-end申请不是运行
您的 back-end 应用程序路径不正确
在您的前端和 back-end 应用程序之间存在某种防火墙正在阻止流量
...

在您的情况下，似乎是 back-end 应用程序运行不正确。

你的第二个问题与 CORS 有关，这是一种防止 JavaScript 连接到不在同一（子）域和端口上的其他 APIs/websites 的机制。在您的情况下，您的前端运行在与后端不同的端口上，因此这意味着您必须处理 CORS。

要处理 CORS，您必须向后端添加 header（即错误提到的 Access-Contol-Allow-Origin header）。使用 Spring，您可以通过向控制器添加以下注释来实现：

@CrossOrigin(origins = "http://localhost:3000")

或者您可以使用过滤器或使用 WebMvcConfigurer:

全局配置 CORS

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurerAdapter() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/api/**").allowedOrigins("http://localhost:3000");
        }
    };
}

如@Lutz Horn 的评论中所述，Spring guide.

中也对此进行了描述

我无法通过 React 拨打休息电话

I cant make rest calls with react

rest

reactjs

spring-boot