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 dehttp://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.