Logo

dev-resources.site

for different kinds of informations.

Configurando CORS Global para API Springboot

Published at
10/26/2023
Categories
cors
frontend
springboot
endpoint
Author
jccorreacouto
Categories
4 categories in total
cors
open
frontend
open
springboot
open
endpoint
open
Author
13 person written this
jccorreacouto
open
Configurando CORS Global para API Springboot

Quando temos a necessidade de consumir (ou enviar) dados de uma API para apresentar no frontend construímos diversos endpoints nela para nos auxiliar nesta tarefa e com isso sempre barramos no famigerado CORS (Cross-Origin Resource Sharing) e ele sempre apresenta o mesmo erro no console:

CORS erro - imagem ilustrativa

Então a primeira ação que temos é ir na nossa API, procurar a Controller e adicionar acima no endpoint a anotação do Springframework...

@CrossOrigin ou @CrossOrigin(origins = "*")
Enter fullscreen mode Exit fullscreen mode

...nos livrar do problema e seguir o desenvolvimento da tarefa.
Então nossa API vai crescendo e todo o endpoint exposto para o front vai receber essa mesma anotação do @CrossOrigin.

Chega um momento que você se pergunta se ainda é realmente necessário ter essa anotação ali, ou a validação do Sonar está avisando que esse CORS é uma vulnerabilidade no seu código.

Há uma maneira, até simples, de fazer essa configuração de CORS porém num escopo Global, sem precisar adicionar em todos os endpoints. Para isso, basta criar a seguinte classe na sua estrutura:

import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
@EnableWebMvc
class CORSConfiguration implements WebMvcConfigurer {

    @Value("${config.cors.allowed-origins}")
    String[] origins;

    @Value("${config.cors.allowed-headers}")
    String[] headers;

    @Value("${config.cors.allowed-methods}")
    String[] methods;

    @Value("${config.cors.max-age}")
    long maxAge;

    @Value("${config.cors.exposed-headers}")
    String[] exposed;

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowCredentials(true).maxAge(maxAge)
                .allowedOriginPatterns(origins).allowedHeaders(headers)
                .allowedMethods(methods).exposedHeaders(exposed);
    }
}
Enter fullscreen mode Exit fullscreen mode

e também alterar o seu arquivo properties.yml adicionado a seguinte estrutura:

# CORS config
config:
  cors:
    allowed-origins: http://localhost:4200, https://www.url-do-front.com.br
    allowed-methods: GET, POST, PATCH, PUT, DELETE, OPTIONS, HEAD
    max-age: 3600
    allowed-headers: "*"
    exposed-headers: "*"
Enter fullscreen mode Exit fullscreen mode

Explicando aqui:
A classe de configuração implementa a interface nativa do Spring MVC chamada WebMvcConfigurer e com isso você precisa sobrescrever o método: void addCorsMappings(CorsRegistry registry).
Esse método, adiciona em tempo de configuração, as configurações de CORS informadas do arquivo .yml que são recuperadas de lá pela anotação @Value, também do Spring.

Nota: No método addCorsMapping, para a classe CorsRegistry, precisa adicionar o método allowCredentials(true), com ele o Swagger não ficará solicitando credenciais de acesso para carregar a página inicial.

Então quando você der o start no projeto, as configurações serão carregadas e adicionadas ao contexto do CORS, com isso não precisa mais da anotação @CrossOrigin em cada endpoint.

Mas claro, lembrando que cada um tem sua necessidade de implementação do CORS, que isso varia de acordo com cada projeto.

Para minha necessidade atual, funcionou perfeitamente. 😊

Até qualquer dia... 😉

cors Article's
30 articles in total
Favicon
Cookies auto clearing after browser refresh issue , CORS related express cookies issue
Favicon
What is CORS Error and how to fix it
Favicon
CORS in Spring Boot with Kotlin
Favicon
Understanding CORS: Why Your API Requests Are Failing 🚧
Favicon
How to Launch Google Chrome Without CORS Protection on macOS
Favicon
Cross-Origin Resource Sharing (CORS): A Comprehensive Guide
Favicon
CORS is Stupid
Favicon
roadauth-rails api jwt cors 2024
Favicon
What is the CORS ?
Favicon
Fixing CORS in your SPA
Favicon
Advanced CORS: Deep Dive into Cross-Origin Resource Sharing
Favicon
Third-Party Cookies Are Gone (Or Not). How Can I Still Embed Cross-Site Apps?
Favicon
SOLVING CORS ERROR
Favicon
Troubleshooting CORS Issues in Express.js: A Simple Misconfiguration
Favicon
Implementing CORS in a Custom Next.js Server
Favicon
What are CORS? and how to configure it in Node?
Favicon
Brewing a More Open Web: CORS Demystified
Favicon
CORS Error Explained and How to Fix It?
Favicon
Resolving CORS Issues in express Node.js Project
Favicon
Resolving Firebase Authentication Sign-in Method Error
Favicon
Problem Encountered with CORS in Deno Server
Favicon
Solving CORS errors with Appwrite
Favicon
Need Help: Cross-Origin-Opener-Policy Blocking Google Login Window.Closed Call
Favicon
Understanding CORS, CSRF attacks and enabling valid CORS
Favicon
Enabling CORS in a .NET Core Server-Side Application
Favicon
[SOLVED]Yet another docker + vite, The connection was reset
Favicon
Cross-Origin Resource Sharing (CORS)
Favicon
Modern API development(Part 2): Initialize Server
Favicon
Configurando CORS Global para API Springboot
Favicon
Understand CORS 🌐 in Easy Way🦾

Featured ones: