reactjs - 如何修复React和Spring Web应用程序中的cors错误？

Question

如何修复我的 React 和 Spring 应用程序中的 CORS 错误。

我实现了一个简单的方法来获取用户列表。我已经使用 postman 测试了这个端点。现在，我使用 fetch API 从我的 React js 应用程序中获取此列表。我在 Spring 后端添加了 @CrossOrigin 注释。我还在 React 应用程序中的 package.json 文件中添加了一个代理。

React JS 代码:-

import React from 'react';
import { Component } from 'react';

class DropDownUsers extends Component {
  state = {
    users : [],
    selectedUser : "",
    validationError : ""
  }

  componentDidMount() {

   fetch("http://localhost:8080/api/users")
    .then(data => {
      let usersFromApi = data.map(user => {
        return {
          value : user,
          display : user
        }})
      this.setState({ users : [{value: '', display: '(Choose the user)'}].concat(usersFromApi)});
    })
      .then((response) => {
        return response.json();
      })
      .catch(error => {
        console.log(error);
      });
  }

  render() {
    return (
      <div>
        <select value={this.state.selectedUser}
                onChange={(e) => this.setState({selectedUser: e.target.value})}
         >
         {this.state.users.map((user) => <option key={user.value} value={user.value}> {user.display}</option>)}
        </select>
        <div style={{color:'red',marginTop:'5px'}}>
          {this.state.validationError}
        </div>
      </div>
    )
  }
}

export default DropDownUsers;

错误消息:-

Access to fetch at 'http://localhost:8080/api/users' from origin 'http://localhost:3001' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled

Spring 配置文件:-

public ConfigurableServletWebServerFactory servletContainer() {
        final TomcatServletWebServerFactory factory = new TomcatServletWebServerFactory();

        if (ajpEnabled) {
            factory.setProtocol("AJP/1.3");

            factory.addConnectorCustomizers(connector -> {
                connector.setSecure(false);
                connector.setScheme("http");
                connector.setAllowTrace(true);
                connector.setPort(8009);
            });
        }

        return factory;
    }

Spring Controller :-

@Slf4j
@EnableLogging
@CrossOrigin(origins = "http://localhost:3001")
@Path("/users")
public class ListOfUsers {

    @Autowired
    DAO DAO;

    @GET
    @Produces(APPLICATION_JSON)
    public Response execute(@Valid ListOfUsersBean listOfUsersBean) {

        final Optional<List<ListOfUsersBean>> user = DAO.getTotalListOfUsers();
        return status(SC_OK).entity(user).build();
    }

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

}

我想在下拉菜单中列出用户。任何帮助将不胜感激。

Answer 1

我能够解决这个问题。我必须添加一个 CORSFilter 类，如下所示，我在此页面中找到了它:- https://stackoverflow.com/questions/23450494/how-to-enable-cross-domain-requests-on-jax-rs-网络服务:-

import javax.ws.rs.container.ContainerRequestContext;
import javax.ws.rs.container.ContainerResponseContext;
import javax.ws.rs.container.ContainerResponseFilter;
import javax.ws.rs.ext.Provider;

@Provider
public class CORSFilter implements ContainerResponseFilter {

    @Override
    public void filter(final ContainerRequestContext requestContext,
                       final ContainerResponseContext cres) throws IOException {
        cres.getHeaders().add("Access-Control-Allow-Origin", "*");
        cres.getHeaders().add("Access-Control-Allow-Headers", "origin, content-type, accept, authorization");
        cres.getHeaders().add("Access-Control-Allow-Credentials", "true");
        cres.getHeaders().add("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS, HEAD");
        cres.getHeaders().add("Access-Control-Max-Age", "1209600");
    }

}