Javascript React Admin with Spring Boot API中的X-Total-Count缺少标头错误

我有我的SpringBootRESTAPI。链接：“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>
    );
 }

在我的JavaScript代码中：

当我使用restProvider时，我得到“HTTP响应中缺少内容范围标头”错误

当我使用jsonServerProvider时，会出现“HTTP响应中缺少X-Total-Count头”错误

我的问题：

---

如何修复上述错误？

在RestController中，根据您的客户端添加crossorigin base

@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;
    }
}

@ControllerAdvice
公共类ResourceSizeDevice在BodyWrite之前实现ResponseBodyAdvice（集合主体、方法参数returnType、MediaType selectedContentType、class>selectedConverterType、ServerHttpRequest请求、ServerHttpResponse响应）{
response.getHeaders（）.add（“X-Total-Count”，String.valueOf（body.size（））；
返回体；
}
}

@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;
    }
}