2
respostas

[PROBLEMA DE CORS]

Olá. Configurei o meu index.js da seguinte forma.

const express = require('express');
const config = require('config');
const fornecedoresRoutes = require('../routes/fornecedores');
const NaoEncontrado = require('./errors/NaoEncontrado')
const CampoInvalido = require('./errors/CampoInvalido')
const DadosNaoFornecidos = require('./errors/DadosNaoFornecidos')
const ValorNaoSuportado = require('./errors/ValorNaoSuportado');
const formatosAceitos = require('./serializador').formatosAceitos;
const SerializerError = require('./serializador').SerializadorErro;

const app = express();
app.use(express.json());
app.use(express.urlencoded({extended: true}));

app.use((req, res, next) => {
  let formatReq = req.header('Accept');

  if (formatReq === '*/*') {
    formatReq = 'application/json';
  }

  if (formatosAceitos.indexOf(formatReq) === -1) {
    res.status(406).json({ message: 'Formato da requisição não é aceito' });
    return
  }
  res.setHeader('Content-Type', formatReq);
  next();
})

app.use((error, _req, res, next) => {
  let status = 500;

  if(error instanceof NaoEncontrado) {
    status = 404;
  }

  if(error instanceof CampoInvalido || error instanceof DadosNaoFornecidos) {
    status = 400;
  }

  if(error instanceof ValorNaoSuportado) {
    status = 406;
  }
  const serializador = new SerializerError(res.getHeader('Content-Type'));
  res.status(status).send(serializador.serializar({ 
      mensagem: error.message,
      id: error.idErro
    }
  ));
});

app.use((_req, res, next) => {
  res.set('Access-Control-Allow-Origin', 'https://developer.mozilla.org');
  next();
});

app.use('/api/fornecedores', fornecedoresRoutes);

app.listen(config.get('api.porta'), () => {
  console.log(`Server started on ${config.get('api.porta')}`);
});

module.exports = app;

Ao realizar o fetch no navegador retornou o seguinte erro:

Refused to connect to 'http://localhost:3000/api/fornecedores/1/produtos' because it violates the following Content Security Policy directive: "connect-src 'self' www.google-analytics.com stats.g.doubleclick.net".

Refused to connect to 'http://localhost:3000/api/fornecedores/1/produtos' because it violates the document's Content Security Policy.

Repare que no index.js foi inserido o seguinte cabeçalho:

app.use((_req, res, next) => {
  res.set('Access-Control-Allow-Origin', 'https://developer.mozilla.org');
  next();
});

Ainda assim os erros persistiram. Estaria esta forma de utilização do cabeçalho desatualizada ou tenho que inserir outros cabeçalhos? Desde já agradeço pelo suporte.

Obs.: Clonei o repositório do curso em outra pasta, inseri o cabeçalho como na forma acima e ainda assim apresentou o mesmo erro.

2 respostas

Estou com o mesmo erro nos browsers Edge e Chrome. Já no Firefox, o qual ele usa no curso, os erros são os descritos abaixo:

fetch("http://localhost:3000/api/fornecedores/3/produtos") Content Security Policy: As configurações da página bloquearam o carregamento de um recurso em http://localhost:3000/api/fornecedores/3/produtos (“connect-src”). debugger eval code:1:5 Uncaught (in promise) TypeError: NetworkError when attempting to fetch resource. debugger eval code:1 debugger eval code:1:6 Promise { : "rejected", : TypeError } ​ : "rejected" ​ : TypeError: NetworkError when attempting to fetch resource.

Alerta antifraude: Tome cuidado ao colar coisas que você não entende. isso pode permitir que invasores roubem sua identidade ou assumam controle do seu computador. Digite ‘permitir colar’ abaixo (não precisa teclar enter) para permitir colar.

Em nenhum deles consegui reproduzi o que esta sendo feito no vídeo.

Att Henrique

Olá!

Pelo que no código de Bruno Araujo Duarte, não está sendo usado o módulo cors, assim sugiro o seguinte:

Instalar o módulo cors > yarn add cors e no código do servidor:

const cors = require("cors");

const app = express();

app.use(cors());

...