我无法通过反应拨打休息电话答案

【问题标题】：I cant make rest calls with react我无法通过反应拨打休息电话
【发布时间】：2016-12-05 07:54:21
【问题描述】：

我目前正在学习使用 React，但我遇到了一个问题：我想通过我的 Java Spring Boot 后端 (Tomcat) 使用 react。 React 在端口 3000（默认）上运行，我的 Tomcat 服务器在端口 8080（默认）上运行。现在，当我进行 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);
        });

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

【问题讨论】：

您是否尝试使用邮递员或可能发布的应用程序发送请求？其他情况，您的后端是否接受跨源请求？
在您的浏览器中尝试localhost:8080/api/path?p=test。有用吗？
连接被拒绝的意思正是它所说的，由于某种原因它无法与您的后端通信。检查您的路径是否正确，如果您的后端正在运行，... 。我们目前的信息无法解决这个问题。
好的，谢谢@g00glen00b .. 我很愚蠢，我的后端没有运行。现在我的连接被接受了，但我得到了No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
@ChristianPeters spring.io/guides/gs/rest-service-cors

标签： rest reactjs spring-boot

【解决方案1】：

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

您的后端应用程序未运行
后端应用程序的路径不正确
在您的前端和后端应用程序之间有某种防火墙阻止了流量
...

在您的情况下，它似乎是未正常运行的后端应用程序。

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

要处理 CORS，您必须在后端添加一个标头（即错误提及的 Access-Contol-Allow-Origin 标头）。使用 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 在 cmets 中提到的，这也在 Spring guide 中有所描述。

【讨论】：