1
resposta

Erro - CORS - Porta diferente

Olá,
Meu windows bloqueia a porta 80 então tive que mudar todas as referências (escolhi a 8000), mas acredito que seja isso que está gerando erro cors.

"Requisição cross-origin bloqueada: A diretiva Same Origin (mesma origem) não permite a leitura do recurso remoto em http://localhost/mkt/leads (motivo: falta cabeçalho 'Access-Control-Allow-Origin' no CORS). Código de status: 200.

Requisição cross-origin bloqueada: A diretiva Same Origin (mesma origem) não permite a leitura do recurso remoto em http://localhost/mkt/leads (motivo: falha na requisição CORS). Código de status: (null)."

Como resolver?

1 resposta

Ola Diego.
Esse é um erro bem comum quando você muda a porta padrão (como 80 → 8000) e passa a ter origens diferentes, o que ativa a política de CORS (Cross-Origin Resource Sharing) do navegador.
Vamos entender e resolver o problema passo a passo :
O navegador considera origem a combinação de:

protocolo + domínio + porta

Então:

  • http://localhost (porta 80 implícita)
    é diferente de
  • http://localhost:8000
    Por isso, quando o frontend tenta chamar a API (http://localhost/mkt/leads) enquanto roda, por exemplo, em http://localhost:8000, o navegador bloqueia a requisição por política de segurança (CORS).

Opção 1: Configurar CORS no backend

Você precisa permitir que o backend aceite requisições de outras origens (ex.: http://localhost:8000).
A configuração depende da tecnologia usada no backend. Aqui vão exemplos dos mais comuns:

Se for Node.js com Express:
const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({ origin: 'http://localhost:8000' })); 
// ou para liberar tudo temporariamente:
app.use(cors());

app.listen(8000, () => console.log('API rodando na porta 8000'));
Se for Java (Spring Boot):

No seu controller:

@CrossOrigin(origins = "http://localhost:8000")
@RestController
@RequestMapping("/mkt")
public class LeadsController {
    // ...
}

Ou globalmente, criando um CorsConfigurationSource:

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurer() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**").allowedOrigins("http://localhost:8000");
        }
    };
}
Se for Python (Flask):
from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app, origins=["http://localhost:8000"])

@app.route("/mkt/leads")
def leads():
    return {"msg": "ok"}

Opção 2: Usar a mesma origem (porta)

Se possível, sirva o frontend e o backend na mesma porta (ex.: via proxy ou Docker Compose).
Assim o navegador entende que é a mesma origem e não aplica CORS.
Por exemplo, se usa React + Node:

  • React em http://localhost:3000
  • Node em http://localhost:8000
    Você pode criar um proxy no package.json do React:
"proxy": "http://localhost:8000"

Aí suas chamadas podem ser só para /mkt/leads e o proxy encaminha internamente.

Opção 3: Usar extensão ou flag (apenas para testes)

Não recomendado para produção, mas útil para validar rapidamente:

  • Extensão: “CORS Unblock” no Chrome
  • Ou iniciar o Chrome com a flag --disable-web-security

Dica

Sempre prefira resolver no backend configurando os cabeçalhos CORS corretamente — isso evita falhas de segurança e funciona em qualquer ambiente.

Confere ai se este topico te ajuda e envie um feedback com os resultados.
Bons estudos.