1
resposta

Nginx problema com CORS

Boa tarde, estou rodando o nginx na minha maquina (linux) e o path root / eu deixei a pagina padrão do nginx, para garantir que o nginx estava funcionando, consigo acessa-lá normalmente, e criei um path /api redirecionando para a porta 3000 com um unico endpoint simples em express para imprimir no terminal um hello world! Mas o problema é que eu estou tentando testar isso atraves de uma aplicacao fora do nginx, na minha maquina na 4200 estou rodando um frontend que tem um botao para chamar esse endpoint, mas quando eu clico nele da problema de CORS, já tentei de tudo, configurei o cors no nginx, configurei no back end mas nada funciona, já vi videos no youtube e falei com o gpt, nada resolve, segue abaixo as configs tanto do express, quanto do nginx e da chamada no frontend.

Ps: um ponto importante é que seu eu for direto pela barra de busca do browser e colcoar localhost/api ele imprime o hello world no terminal, só da erro quando faz a chamada via frontend, porta 4200

express async consoleBack() { try { console.log('Fazendo console...');

  fetch('http://localhost/api')
  .then(response => response.text())
  .then(data => {
    console.log('Resposta do backend:', data);
    this.router.navigate(['/management']);

  })
  .catch(error => {
    console.error('Erro na requisição:', error);
  });
  } catch (error) {
    alert(error);
  }

}

EXPRESS const express = require('express'); const cors = require('cors');

const app = express();

app.use(cors({ origin: '*', // Permite todas as origens methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'], allowedHeaders: ['Content-Type', 'Authorization', 'Origin', 'X-Requested-With', 'Accept'] }));

app.get('/', (req, res) => { console.log('Hello World'); res.send('Check the server log!'); });

app.listen(3000, () => { console.log('Server running on http://localhost:3000'); });

NGINX server { listen 80 default_server; listen [::]:80 default_server; root /var/www/html; index index.html index.htm; server_name _;

location / {
    try_files $uri $uri/ =404;
}

location /api/ {
    rewrite ^/api(/.*)$ $1 break;
    proxy_pass http://localhost:3000/;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection keep-alive;
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;

    # Headers CORS SEMPRE aplicados
    add_header 'Access-Control-Allow-Origin' '*' always;
    add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE, OPTIONS' always;
    add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization' always;

    # Preflight OPTIONS
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' '*' always;
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE' always;
        add_header 'Access-Control-Allow-Headers' 'Origin, X-Requested-With, Content-Type, Accept, Authorization' always;
        add_header 'Access-Control-Max-Age' 1728000 always;
        add_header 'Content-Length' 0;
        add_header 'Content-Type' 'text/plain charset=UTF-8';
        return 204;
    }
}

}

print erro Insira aqui a descrição dessa imagem para ajudar na acessibilidade

1 resposta

Bom dia, de qual curso é isso?

O que provavelmente está errado:

Chamada fetch sem barra final

No seu frontend, a chamada é para http://localhost/api, mas no Nginx, você definiu o bloco para /api/ (com barra no final). Isso pode causar problemas de roteamento.

Solução: Altere a chamada do fetch para:

fetch('http://localhost/api/')

. Express não está configurado para lidar com caminhos "relativos"

O seu backend responde em /, mas o Nginx está fazendo rewrite de /api/... para /..., ou seja, o backend precisa estar preparado para lidar com / e com possíveis subcaminhos.

Solução: Prefira deixar o backend respondendo em um prefixo (/api) também, ou ajuste melhor o rewrite.

Se quiser manter o Express assim, você pode mudar seu bloco no nginx para:

location /api/ {
    proxy_pass http://localhost:3000/;
    ...
}

E tirar o rewrite completamente, já que não está lidando com subcaminhos (/api/alguma-coisa).


Cabeçalhos CORS duplicados (Express e Nginx)

Isso normalmente não é um problema, mas pode confundir em alguns cenários. Como o Nginx está no meio, ele precisa responder corretamente às requisições OPTIONS (preflight) antes de o Express receber qualquer coisa.

Sua configuração do Nginx parece correta nesse ponto. Mas, se ainda estiver dando erro, você pode tentar deixar o CORS só no Nginx, e remover o cors() do Express, apenas para testar.