Executando verificação de segurança...
1
progConfianca
2 min de leitura ·

Erro de CORS em Spring + React?

Estou tento problemas com CORS. possuo uma api que requer um token, ao enviar no header pelo axios recebo o erro. api e o app web estão rodando em localhost. Já tentei enviando o rogin pelo cliente. Pertindo todas as origens e a anotação @CrossOrigin. Alguem já passou por isso?

segue o erro:
origin 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.

---Resolvido------------------------------------------------------------------------
apos a dica do leandrodaher, resolvi testar no firefox e vi um erro diferente:
falta cabeçalho 'Access-Control-Allow-Origin'
E pesquisando encontrei essa discução: https://pt.stackoverflow.com/questions/422227/has-been-blocked-by-cors-policy-no-access-control-allow-origin

A solução que funcionou foi implementar o CorsFilter, um filter semelhante ao do JSF. em Access-Control-Allow-Origin espefifiquei o localhost:3000, e adicionei meus heders tambem. Segue o exemplo de implementação.

import org.springframework.core.Ordered;
import org.springframework.core.annotation.Order;
import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**

  • @author emanuel

*/
@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CorsFilter implements Filter {

public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
        throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    HttpServletRequest request = (HttpServletRequest) req;

    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Credentials", "true");
    response.setHeader("Access-Control-Allow-Methods",
            "ACL, CANCELUPLOAD, CHECKIN, CHECKOUT, COPY, DELETE, GET, HEAD, LOCK, MKCALENDAR, MKCOL, MOVE, OPTIONS, POST, PROPFIND, PROPPATCH, PUT, REPORT, SEARCH, UNCHECKOUT, UNLOCK, UPDATE, VERSION-CONTROL");
    response.setHeader("Access-Control-Max-Age", "3600");
    response.setHeader("Access-Control-Allow-Headers",
            "Origin, X-Requested-With, Content-Type, Accept, Key, Authorization");
    if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
        response.setStatus(HttpServletResponse.SC_OK);
    } else {
        chain.doFilter(req, res);
    }
}

public void init(FilterConfig filterConfig) {
    // not needed
}

public void destroy() {
    // not needed
}

}

Carregando publicação patrocinada...
2
1
2
leandrodaher

Recentemente eu tive um problema parecido. Primeiro faça como o leopoglia disse, coloque o Access-Control-Allow-Origin no cabeçalho de resposta do servidor.

Depois teste com o Firefox pois o Chrome parece bloquear requisições para a rede interna. Observe que no Firefox você precisa especificar exatamente o host e porta do cliente que está fazendo requisição para o servidor. Não poderá usar o valor coringa asterisco (*).

Esta pergunta no Stackoverflow explica esse comportamento do Chrome
https://stackoverflow.com/questions/66534759/cors-error-on-request-to-localhost-dev-server-from-remote-site

1
2
leopoglia

Pode ser a falta de configuração do cors no Spring, se você não tiver, você deve criar no root do spring uma classe chamada CorsConfiguration.

@Configuration
public class CorsConfiguration implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                    .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS", "HEAD", "TRACE", "CONNECT");
    }
}
1