使用 Spring Boot API 的 React Admin 中的 X-Total-Count 缺少标头错误答案

【问题标题】：X-Total-Count missing header error in React Admin with Spring Boot API使用 Spring Boot API 的 React Admin 中的 X-Total-Count 缺少标头错误
【发布时间】：2021-07-04 10:27:47
【问题描述】：

我有我的 Spring Boot REST API。链接：“http://localhost:8080/api/components/component/list”

对于前端，我使用的是 React，上面是我希望“React Admin”应用程序使用的链接。

这是我的 Spring Boot 的 CORS 代码，它位于一个名为 CorsConfig 的单独类中：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry myCorsRegistry){
             myCorsRegistry.addMapping("/**")
            .allowedOrigins("http://localhost:3000")  //frontend's link
            .allowedHeaders("Access-Control-Allow-Origin","Access-Control-Allow-Header", "Access-Control-Expose-Headers", "Content-Range", "Content-Length", "Connection", "Content-Type", "X-Total-Count", "X-Content-Type-Options", "Set-Cookies", "*")
            .allowedMethods("GET", "POST", "PUT", "HEAD", "OPTIONS", "PATCH")
            .allowCredentials(true)
            
     }

}

对于我的控制器类，我有以下内容：

@CrossOrigin("http://localhost:3000")
@RequestMapping("/api/components/component")
@RestController
public class Component{
     @Autowired
     //code...
}

这是我的反应代码：

import React from 'react';
import { Admin,ListGuesser, Resource} from 'react-admin';
import jsonServerProvider from "ra-data-json-server";

const parentURL = 
jsonServerProvider(`http://localhost:8080/api/components/component`);

function App() {
    return(
       <Admin dataProvider={parentURL}>
          <Resource name="list" list={ListGuesser} />
        </Admin>
    );
 }

这是我在 Chrome 控制台中遇到的错误：

The X-Total-Count header is missing in the HTTP Response. The jsonServer Data Provider expects 
responses for lists of resources to contain this header with the total number of results to build the 
pagination. If you are using CORS, did you declare X-Total-Count in the Access-Control-Expose-Headers 
header?

在我的 JavaScript 代码中：

当我使用 restProvider 时，我收到“HTTP 响应中缺少 Content-Range 标头”错误
当我使用 jsonServerProvider 时，我收到“HTTP 响应中缺少 X-Total-Count 标头”错误

我的问题： 如何解决上述错误？

【问题讨论】：

标签： javascript java reactjs spring spring-boot

【解决方案1】：

在 RestController 中根据您的客户端添加跨域基础

@CrossOrigin(origins = {"http://localhost:3000"}, exposedHeaders = "X-Total-Count")

创建一个新类 ConrolAdvice 以发送响应

@ControllerAdvice
public class ResourceSizeAdvice implements ResponseBodyAdvice<Collection<?>> {

    @Override
    public boolean supports(MethodParameter returnType, Class<? extends HttpMessageConverter<?>> converterType) {
        //Checks if this advice is applicable.
        //In this case it applies to any endpoint which returns a collection.
        return Collection.class.isAssignableFrom(returnType.getParameterType());
    }

    @Override
    public Collection<?> beforeBodyWrite(Collection<?> body, MethodParameter returnType, MediaType selectedContentType, Class<? extends HttpMessageConverter<?>> selectedConverterType, ServerHttpRequest request, ServerHttpResponse response) {
        response.getHeaders().add("X-Total-Count", String.valueOf(body.size()));
        return body;
    }
}

【讨论】：