Descrição do problema de origem cruzada

Você pode encontrar a seguinte mensagem de erro:

foi bloqueado pela política CORS: nenhum cabeçalho 'Access-Control-Allow-Origin' está presente no recurso solicitado

Este erro indica que uma solicitação para um determinado endereço foi bloqueada pelo protocolo CORS porque o cabeçalho Access-Control-Allow-Origin está faltando no recurso.

Analisando problemas de origem cruzada

A causa raiz dos problemas de origem cruzada é que os navegadores, por motivos de segurança, restringem o acesso a recursos fora do site atual.

Por exemplo, considere um site hospedado em http://127.0.0.1:8080/ com uma determinada página. Se você acessar recursos do mesmo site, não haverá restrições. Mas se você tentar acessar recursos de um site diferente (por exemplo, http://127.0.0.1:8081), o navegador bloqueará a solicitação.

Observação: consideramos protocolo, domínio e porta como parte da definição de uma "mesma origem".

Elementos com um atributo src, como tags img e script, não estão sujeitos a esta restrição.

Historicamente, quando o front-end e o back-end não eram separados, páginas e interfaces de solicitação existiam no mesmo domínio e porta. Os navegadores permitiriam então solicitações de uma página hospedada em um domínio para solicitar recursos do mesmo domínio.

Por exemplo, http://127.0.0.1:8080/index.html pode solicitar livremente http://127.0.0.1:8080/a/b/c/userLit.

Hoje em dia, com o front-end e o back-end separados em aplicativos diferentes, isso não é permitido e causará problemas de CORS.

O que é origem e origem cruzada?

A origem (ou fonte) consiste no protocolo, domínio e número da porta.

Uma URL é composta de protocolo, domínio, porta e caminho. Dois URLs são considerados de "mesma origem" se seu protocolo, domínio e porta forem idênticos. Qualquer diferença em qualquer um desses três elementos constitui uma solicitação de origem cruzada.

Considere comparações entre origens para https://www.baidu.com/index.html:

O que é a Política de Mesma Origem?

A Política de Mesma Origem é um recurso fundamental de segurança do navegador. Sem ele, a funcionalidade normal dos navegadores pode estar em risco. A arquitetura da Web depende fortemente desta política, e os navegadores a implementam para garantir a segurança.

A Política de Mesma Origem inclui:

1. Política de mesma origem do DOM: Impede a manipulação do DOM de páginas de origem diferentes. Aplica-se principalmente a cenários de iframe de origem cruzada, onde iframes de domínios diferentes não podem acessar uns aos outros.
2. Política de mesma origem XMLHttpRequest: proíbe solicitações HTTP para origens diferentes usando objetos XHR.

Resolvendo problemas de origem cruzada no Spring Boot

1. Criando um filtro para lidar com CORS

Em um projeto onde o front-end e o back-end são implantados separadamente, abordar o CORS é crucial. Os cookies são usados ​​para armazenar informações de login do usuário e os interceptadores Spring gerenciam as permissões. Surgem problemas quando o interceptor e o CORS são processados ​​na ordem errada, causando um erro de CORS.

Uma solicitação HTTP primeiro passa pelo filtro antes de chegar ao servlet e depois ao interceptor. Para garantir que o processamento do CORS ocorra antes da interceptação da autorização, podemos colocar a configuração do CORS em um filtro.

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        corsConfiguration.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
        urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(urlBasedCorsConfigurationSource);
    }
}

2. Configurando CORS no WebMvcConfigurer

Embora JSONP possa resolver problemas de origem cruzada no front-end, ele suporta apenas solicitações GET, o que é limitante em aplicativos RESTful. Em vez disso, você pode lidar com solicitações de origem cruzada com o Cross-Origin Resource Sharing (CORS) no back-end. Esta solução não é exclusiva do Spring Boot e tem sido usada em estruturas SSM tradicionais. Você o configura implementando a interface WebMvcConfigurer e substituindo o método addCorsMappings.

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowCredentials(true)
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .maxAge(3600);
    }
}

3. Configurando CORS no controlador

Você pode habilitar o CORS para métodos de controlador específicos adicionando a anotação @CrossOrigin à anotação @RequestMapping. Por padrão, @CrossOrigin permite todas as origens e métodos HTTP especificados em @RequestMapping.

@RestController
@RequestMapping("/account")
public class AccountController {

    @CrossOrigin
    @GetMapping("/{id}")
    public Account retrieve(@PathVariable Long id) {
        // ...
    }

    @DeleteMapping("/{id}")
    public void remove(@PathVariable Long id) {
        // ...
    }
}

Compreendendo os parâmetros @CrossOrigin：

• @CrossOrigin sem parâmetros permite o acesso a todos os URLs.
• @CrossOrigin(origins = "http://127.0.0.1:8080") restringe o acesso ao URL especificado.
• Esta anotação pode ser usada em classes ou métodos.
• O atributo value ou origins especifica URLs permitidos.
• maxAge indica a idade máxima em segundos para o cache de solicitação de simulação.
• allowCredentials indica se credenciais (cookies) são permitidas. O padrão é falso.
• permitidoHeaders especifica cabeçalhos de solicitação permitidos.
• métodos especifica métodos de solicitação permitidos, sendo o padrão GET, POST, HEAD.

Razões pelas quais @CrossOrigin pode não funcionar

1. A versão do Spring MVC deve ser 4.2 ou superior para suportar @CrossOrigin.
2. Solicitações incorretas podem aparecer como problemas de origem cruzada devido à resposta inadequada do servidor.
3. Se adicionar @CrossOrigin acima da anotação do Controlador ainda resultar em problemas, uma solução possível é especificar os métodos HTTP em @RequestMapping.

Exemplo:

@CrossOrigin
@RestController
public class PersonController {

    @RequestMapping(method = RequestMethod.GET)
    public String add() {
        // some code
    }
}