Controle de Acesso Entre Origens (CORS)

CORS (Cross-Origin Resource Sharing, Compartilhamento de Recursos entre Origens) é um mecanismo que permite que navegadores realizem solicitações a servidores de origens diferentes, superando as restrições da política de mesma origem dos navegadores.

O que é a Política de Mesma Origem?

A política de mesma origem é um recurso de segurança dos navegadores que limita como documentos ou scripts carregados de uma origem podem interagir com recursos de outra origem. Considera-se "mesma origem" quando há o mesmo protocolo, domínio e número de porta.

Por que precisamos de CORS?

Quando aplicações front-end precisam acessar APIs de origens diferentes, o CORS se torna necessário. Por exemplo:

Aplicação front-end hospedada em https://frontend.com
Serviço de API hospedado em https://api.backend.com

Sem CORS, o navegador bloquearia o acesso da aplicação front-end ao serviço de API.

Como o CORS funciona

O CORS utiliza cabeçalhos HTTP para controlar o acesso entre origens:

Solicitações simples: enviadas diretamente, com o servidor controlando a permissão via cabeçalhos de resposta
Solicitações de pré-voo (preflight): o navegador primeiro envia uma requisição OPTIONS para verificar a permissão, e só então envia a requisição real

Como navegadores enviam requisições OPTIONS de pré-voo, é necessário adicionar tratamento para esse tipo de solicitação, aplicando o middleware CORS ao Service.

Usando CORS no Salvo

O Salvo oferece um middleware CORS integrado, fácil de configurar e usar. Veja o exemplo:

WARNING

Atenção: O middleware .hoop(cors) é aplicado ao Service, não ao Router. Isso permite o tratamento automático das requisições OPTIONS de pré-voo.

let cors = Cors::new()
    .allow_origin(["http://127.0.0.1:5800", "http://localhost:5800"])
    .allow_methods(vec![Method::GET, Method::POST, Method::DELETE])
    .allow_headers("authorization")
    .into_handler();

// Configuração do roteador com proteção CORS
let router = Router::with_path("hello").post(hello);
let service = Service::new(router).hoop(cors);

Código de Exemplo

main.rs

Cargo.toml

cors/src/main.rs

use salvo::cors::Cors;
use salvo::http::Method;
use salvo::prelude::*;

#[tokio::main]
async fn main() {
    // Initialize logging system
    tracing_subscriber::fmt().init();
    // Start both backend and frontend servers concurrently
    tokio::join!(backend_server(), frontend_server());
}

async fn backend_server() {
    // Handler that returns a simple message for CORS demonstration
    #[handler]
    async fn hello() -> &'static str {
        "hello, I am content from remote server."
    }

    // Configure CORS middleware with specific settings:
    // - Allow requests from localhost:5800
    // - Allow specific HTTP methods
    // - Allow authorization header
    let cors = Cors::new()
        .allow_origin(["http://127.0.0.1:5800", "http://localhost:5800"])
        .allow_methods(vec![Method::GET, Method::POST, Method::DELETE])
        .allow_headers("authorization")
        .into_handler();

    // Set up backend router with CORS protection
    let router = Router::with_path("hello").post(hello);
    let service = Service::new(router).hoop(cors);

    // Start backend server on port 5600
    let acceptor = TcpListener::new("0.0.0.0:5600").bind().await;
    Server::new(acceptor).serve(service).await;
}

async fn frontend_server() {
    // Handler that serves the HTML page with CORS test
    #[handler]
    async fn index() -> Text<&'static str> {
        Text::Html(HTML_DATA)
    }

    // Set up frontend router to serve the test page
    let router = Router::new().get(index);
    // Start frontend server on port 5800
    let acceptor = TcpListener::new("0.0.0.0:5800").bind().await;
    Server::new(acceptor).serve(router).await;
}

// HTML template with JavaScript code to test CORS
// Contains a button that triggers a POST request to the backend server
const HTML_DATA: &str = r#"
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Salvo Cors</title>
</head>
<body>
<button id="btn">Load Content</button>
<div id="content"></div>
<script>
document.getElementById("btn").addEventListener("click", function() {
    fetch("http://127.0.0.1:5600/hello", {method: "POST", headers: {authorization: "abcdef"}}).then(function(response) {
        return response.text();
    }).then(function(data) {
        document.getElementById("content").innerHTML = data;
    });
});
</script>
</body>
</html>
"#;

Principais Opções de Configuração

O middleware CORS oferece diversas opções de configuração:

Origens permitidas: controla quais domínios podem acessar os recursos
Métodos permitidos: especifica os métodos HTTP permitidos (GET, POST, etc.)
Cabeçalhos permitidos: define os cabeçalhos de solicitação permitidos
Cabeçalhos expostos: indica quais cabeçalhos de resposta podem ser acessados pelo cliente
Credenciais permitidas: determina se as solicitações podem incluir cookies e outras credenciais
Tempo de cache para pré-voo: duração do cache para resultados de requisições de pré-voo

Com uma configuração adequada do CORS, é possível garantir segurança enquanto atende às necessidades de acesso entre origens.

Nesta página

#Controle de Acesso Entre Origens (CORS)

#O que é a Política de Mesma Origem?

#Por que precisamos de CORS?

#Como o CORS funciona