> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://help.icommkt.com/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# CORS: Conceito, Solução e Riscos em API REST com Chave API

## Origem do erro CORS

CORS, um acrônimo para Cross-Origin Resource Sharing, é um mecanismo implementado em navegadores da web para permitir que os recursos de uma página da web sejam solicitados a um domínio diferente daquele que serviu a primeira página. Este mecanismo foi projetado para proteger o usuário contra ataques maliciosos que podem comprometer seus dados por meio de solicitações entre sites.

O erro CORS surge quando um aplicativo da web tenta fazer uma solicitação a uma API hospedada em um domínio diferente do aplicativo. Por exemplo, se seu aplicativo em https://miapp.com tentar acessar uma API em https://api.externo.com, o navegador bloqueará a solicitação devido à sua política de mesma origem, a menos que a API externa tenha configurado corretamente Cabeçalhos CORS para permitir solicitações do seu domínio.

###### Exemplo de erro CORS

Sem a configuração adequada do CORS, uma solicitação AJAX de https://miapp.com para https://api.externo.com falharia:

```javascript
fetch("https://api.externo.com/datos")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error al realizar la petición:', error));
```

O navegador exibirá um erro semelhante a:


```css
Access to fetch at 'https://api.externo.com/datos' from origin 'https://miapp.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
```

## Solução: Habilitar Domínio de Origem

Para resolver o erro CORS, o servidor API deve incluir o cabeçalho Access-Control-Allow-Origin em sua resposta, especificando os domínios que têm permissão para acessar os recursos. Isso pode ser definido de maneira geral ou específica para determinados domínios.

### Riscos ao usar chave de API para autorização

Usar chaves de API como método de autorização em conjunto com CORS representa um risco significativo. Ao fazer solicitações diretamente do FrontEnd, a chave da API pode ser exposta através do código-fonte do navegador ou de ferramentas de desenvolvimento, colocando em risco a segurança da API e a integridade dos dados.

###### Exemplo de exposição de chave de API

```javascript
fetch("https://api.externo.com/datos?apiKey=MI_API_KEY_SECRETA")
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('Error:', error));
```

Nesse caso, qualquer pessoa com acesso ao navegador poderá ver facilmente a chave de API usada na solicitação.

## Recomendação: Faça conexões pelo backend

Para mitigar os riscos de segurança associados à exposição de chaves de API e outros dados confidenciais, é recomendável fazer solicitações a APIs externas a partir do BackEnd da aplicação. Dessa forma, a lógica de autorização e o manuseio das chaves API permanecem ocultos e seguros no servidor.

###### Exemplo de solicitação do BackEnd

```javascript
const fetch = require('node-fetch');

// Función para realizar la solicitud a la API externa desde el servidor
function obtenerDatosDesdeAPI() {
  const url = "https://api.externo.com/datos?apiKey=MI_API_KEY_SECRETA";
  
  fetch(url)
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error('Error al realizar la petición:', error));
}
```

Ao fazer solicitações através do servidor, você preserva a segurança das informações sensíveis e evita o risco de expor dados sensíveis ao cliente.

Concluindo, embora o CORS seja uma solução eficaz para permitir solicitações de origem cruzada, é crucial lidar com a segurança das chaves de API e de outros dados confidenciais, preferindo fazer solicitações confidenciais do servidor para garantir a segurança e integridade da aplicação e seus usuários.

| Se você também deseja fazer solicitações a partir do seu FrontEnd, entre em contato conosco pelo e-mail success@icommkt.com, e envie-nos o domínio a partir do qual serão feitas as solicitações