CORS 403 на React JS

Question

************************* Решение ******************************

0.- Добавьте в свой POM

 <dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-security</artifactId>
 </dependency>

0.1 - Добавьте в ваш проект пакеты.project.bla.bla.bla.Configs

1.- В конфигурации. Пакеты создают 3 Class

    -CorsConfiguration.java
    -CorsFilter.java
    -WebSecurityConfig.java

2.- На вашем CorsConfiguration.java

    @Configuration
@EnableWebMvc
public class CorsConfiguration implements WebMvcConfigurer
{
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedMethods("GET", "POST", "PUT", "DELETE");
    }

    @Bean
    public WebMvcConfigurer corsConfigurer() 
    {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedOrigins("http://YOURSPRINGSERVER:PORT", "http://YOURFRONT/REACT/WHATEVERSERVER:PORT");
            }
        };
    }

Примечание: здесь он предоставит доступ любому зарегистрированному переднему серверу, который запрашивает из корневого URI, и,все методы глаголов («GET», «POST», «PUT», «DELETE»)

3.- на вашем CorsFilter.java

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse 
        servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request= (HttpServletRequest) servletRequest;

        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", 
        "GET,POST,DELETE,PUT,OPTIONS");
        response.setHeader("Access-Control-Allow-Headers", "*");
        response.setHeader("Access-Control-Allow-Credentials", true);
        response.setHeader("Access-Control-Max-Age", 180);
        filterChain.doFilter(servletRequest, servletResponse);
       }

Примечания: этот класс определяет ответызаголовки html контроллеров

4.-И, наконец, в вашем WebSecurityConfig.class

        @Configuration
    @EnableWebSecurity
    @EnableGlobalMethodSecurity(prePostEnabled = true)
    public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
    @Autowired
        public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {

        }

        @Bean
        public PasswordEncoder passwordEncoder() {
            return new BCryptPasswordEncoder();
        }

        @Bean
        CorsFilter corsFilter() {
            CorsFilter filter = new CorsFilter();
            return filter;
        }

        @Override
        protected void configure(HttpSecurity httpSecurity) throws Exception {      
            httpSecurity
            .addFilterBefore(corsFilter(), SessionManagementFilter.class) 
            .csrf().disable()
            .authorizeRequests()
            .antMatchers("/raps/**").permitAll();
        }}

и готовы все запросы, сделанные с фронта, будут приняты, и вы также можете добавить некоторыеTOKEN as JWT без проблем

---

У меня следующая проблема, сейчас я тренируюсь с входом в React + Axios, но когда я пробую метод после входа в систему, появляется следующая ошибка:

Консоль Chrome

OPTIONS http://localhost:8081/usuario/auth 403

Access to XMLHttpRequest at 'http://localhost:8081/usuario/auth' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Метод Ajax

handleLogin(e) {
    e.preventDefault();
    console.log(this.state)
    axios.post(`http://localhost:8081/usuario/auth`, this.state )
      .then(res => {
        console.log(res);
        console.log(res.data);
      })

    this.props.onAddUser(this.state);
  }

Заголовки запроса

Accept: */*
Accept-Encoding: gzip, deflate, br
Accept-Language: es-CL,es-US;q=0.9,es;q=0.8,en-US;q=0.7,en;q=0.6,es-419;q=0.5
Access-Control-Request-Headers: content-type
Access-Control-Request-Method: POST
Connection: keep-alive
Host: localhost:8081
Origin: http://localhost:3000
Referer: http://localhost:3000/
Sec-Fetch-Mode: cors
Sec-Fetch-Site: same-site
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.79 Safari/537.36

** Объект на реакции ** {email: "manuel@gmail.com", password: "ghgg1255"}

Бэкэнд

package com.raps.controller;

import...

@RestController
@CommonsLog
@CrossOrigin
@RequestMapping(value = "/raps/usuario", produces = MediaType.APPLICATION_JSON_VALUE)
public class UsuarioController {

    @Autowired
    private UsuarioService uService; 

    @GetMapping
    public Iterable<Usuario> getAll(){... thats work ...}

    @GetMapping("/{id}")
    public Optional<Usuario> getById(@PathVariable int id) {... thats work ...}

    @PostMapping("/auth")
    public Optional<Usuario> auth(@RequestBody Usuario usuario) {
        log.info("Controller");
        return uService.auth(usuario);
    }

}

Я читал о происхождениипроблемы, но это не возможно решить для почтовых методов. Я прошу вашей помощи и указаний по этому поводу.

Код Git: https://github.com/CaptMoar/RaPService/tree/Seba

Answer 1

откройте свой package.json

Добавьте атрибут, который читает

"proxy":"localhost8081"

Измените все ваши почтовые запросы, чтобы удалить часть localhost8081, чтобы они просто были чем-тонапример,

axios.post("/usuario/auth",this.state)

Теперь сервер React dev будет подделывать ваш адрес таким же, как и у внутреннего сервера (это возможно только в режиме разработки - современные веб-браузеры слишком умны для этого на развернутой ссылке)и должен позволить вам обойти ошибку CORS. если это не сработает, измените свой прокси на IP-адрес.