Получение проблемы CORS при публикации данных из внешнего интерфейса (React) - PullRequest
Новая
       36

Получение проблемы CORS при публикации данных из внешнего интерфейса (React)

0 голосов
/ 08 июля 2020

Я отправляю данные из реакции на бэкэнд весенней загрузки, используя ax ios. Пожалуйста, обратитесь к приведенному ниже коду реакции. 

const handleSubmit = (e) =>{
    e.preventDefault()
    alert( "Username "+ username + " Password "+password);
    axios.post('http://localhost:8080/sign-up',{
        username:username,
        password:password})
};

Ниже мой код пружины. @PostMapping ("/ sign-up") publi c String signUp (@RequestBody User user) {

    if(userRepository.findByUsername(user.getUsername())==null) {
        Set<Role> roles= new HashSet<>();
        Role role= roleRepository.findByName("USER");
        roles.add(role);
        user.setRoles(roles);
        user.setPassword(bcryptEncoder.encode(user.getPassword()));
        userRepository.save(user);
        return "Success";
    }
    else{
        return "Username Already Exsist";
    }
}

Когда я отправляю данные из внешнего интерфейса, я получаю ответ ниже в консоли браузера. 

Access to XMLHttpRequest at 'http://localhost:8080/sign-up' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

xhr.js:178 POST http://localhost:8080/sign-up net::ERR_FAILED
createError.js:16 Uncaught (in promise) Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:83)

Я вставил следующую строку в контроллер загрузки пружины. 

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

Но вышеуказанное решение не сработало. Я подозреваю, что во время вызова опции post call происходит проверка ресурса, и в этом случае возникает только эта проблема cors. Благодарим за любой вклад в эту проблему.

Ответы [ 2 ]

0 голосов
/ 11 июля 2020

Я нашел решение указанной выше проблемы. Эта проблема cors возникает, когда происходит обмен данными между разными доменами. Поэтому я добавил строку ниже в метод configure () класса SecurityConfig. 

 http.cors();

Затем я реализовал следующий класс CustomCorsFilter. @Component publi c class CustomCorsFilter расширяет OncePerRequestFilter {

    @Override
    protected void doFilterInternal(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse, FilterChain filterChain) throws ServletException, IOException {
        httpServletResponse.setHeader("Access-Control-Allow-Origin", "*");
        httpServletResponse.setHeader("Access-Control-Allow-Methods", "GET, POST, PATCH, PUT, DELETE, OPTIONS");
        httpServletResponse.setHeader("Access-Control-Max-Age", "3600");
        httpServletResponse.setHeader("Access-Control-Allow-Headers", "Origin, Content-Type, Allow, authorization, content-type, xsrf-token");
        httpServletResponse.addHeader("Access-Control-Expose-Headers", "xsrf-token");
        if ("OPTIONS".equals(httpServletRequest.getMethod())) {
            httpServletResponse.setStatus(HttpServletResponse.SC_OK);
        } else {
            filterChain.doFilter(httpServletRequest, httpServletResponse);
        }
    }
}

Теперь проблема с корсом отсутствует.

0 голосов
/ 08 июля 2020

Недавно у меня была похожая проблема.

Я сделал первый шаг вперед, временно удалив spring-boot-starter-security из моего POM, потому что он блокировал несанкционированный вызов. Итак, я понял, что это была моя проблема. Мне пришлось настроить CORS для обеспечения безопасности Spring, а затем я заставил его работать. Приношу извинения за расплывчатый ответ, но я надеюсь, что это поможет вам взглянуть в другом направлении, которое могло бы вам помочь.

...