Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Continua dando erro de CORS

Continua dando o erro do CORS, alguém poderia me ajudar... O projeto esta no GIT HUB, codei levemente diferente do professor.

Ainda estou em dúvida no seguinte:

A pasta do servidor da API deve estar dentro do PROJETO PETSHOP? Devo baixar o live-server no PROJETO PETSHOP ou no SERVIDOR DA API?

Segue o git: https://github.com/Raul-Pinheiro/CursoFetchAPI-SPA

5 respostas

Boa tarde Raul

Tive os mesmos problemas e dúvidas que você e após quebrar muito a cabeça resolvi assim:

1)Baixe os arquivos do servidor e do projeto disponibilizados na parte inicial do curso (atividade 2 da aula 1).

2) Abra a pasta do servidor via terminal e digite o comando npm install para instalar todas as dependências necessárias para que o devidor rode.

Importante: a pasta do servidor não precisa ficar na mesma pasta do projeto, você pode sauva-la na pasta que quiser, mas antes de entrar com o comando do live-server no terminal você deve inicializar o servidor com npm start, para isso, entre na pasta do servidor pelo terminal e digite o comando npm start.

3) Caso você esteja usando a versão mais atual do node, após o npm install, receberá no terminal uma mensagem acusando vulnerabilidades. Para corrigi-las digite o comando npm audit fix

4) Após rodar o comando audit fix se você receber uma mensagem acusando que ainda há necessidade correção de vulnerabilidades digite o comando npm audit fix --force

5) No arquivo clientes.html adicione type=module, veja o código abaixo:

<script type="module" src="./api/cliente.js"></script>
<script type="module" src="./componentes/lista/listagem-cliente.js"></script>

6) No fim do arquivo clientes.js, que está dentro da pasta api, adicione:

export{
  listarClientes,
  cadastrarClientes,
  deletaCliente,
  detalhaCliente,
  editaCliente
}

7) No arquivo listagem-clientes.js, que está dentro da pasta lista, adicione o seguinte import

import { deletaCliente, listarClientes} from '../../api/cliente.js'//Na primeira aula o professor não coloca o .js, mas ele é necessário

8)Usando o terminal instale o live server na pasta do projeto com o comando npm i live-server

9) Rode o live server pelo terminal usando o comando live-server não se esqueça que o servidor deve ter sido inicializado antes com o npm start

Prontinho, tudo funcionando ok!

Quebrei muito a cabeça aqui para conseguir também. Creio que a Alura pecou bastante nesse curso, pois faltaram algumas explicações essenciais.

Nas aulas posteriores o professor deixou o arquivo do servidor dentro da pasta do projeto, creio que por comodidade mesmo.

Espero ter ajudado.

Creio que o problema esteja no passo 9. Não estou entendendo como rodar o live-server no terminal. Todos os passos foram seguidos já, até refiz pra ter certeza, mas ainda não roda. Como eu devo rodar o live-server? Tem algum comando ou pasta específica?

COntinua aparecendo :

clientes.html:1 Access to script at 'file:///C:/Users/Raul/Desktop/FetchAPI/ProjetoFetch/app/js/api/comunicaAPI.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
comunicaAPI.js:1 Failed to load resource: net::ERR_FAILED
clientes.html:1 Access to script at 'file:///C:/Users/Raul/Desktop/FetchAPI/ProjetoFetch/app/js/views/listagem-clientes.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
listagem-clientes.js:1 Failed to load resource: net::ERR_FAILED
clientes.html:1 Access to script at 'file:///C:/Users/Raul/Desktop/FetchAPI/ProjetoFetch/app/js/controllers/deletaCliente.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
deletaCliente.js:1 Failed to load resource: net::ERR_FAILED

Veja se isso resolve:

No VS code clique com o botão direito na pasta na qual você salvou o servidor, selecione a opção Open in integrated terminal. Um terminal abrirá dentro do VS code, digite o comando npm start e dê enter para subir o servidor.

Agora clique com o botão direito na pasta do projeto, escolha novamente a opção Open in integrated terminal, um novo terminal abrirá dentro do VS Code, digite o comando live-server e dê enter. Irá abrir no browser uma tela com os diretórios do projeto, clique no diretório src e dentro dele no arquivo clientes.html

Espero ter ajudado

Tentei e continua dando o mesmo erro. Eu codei levemente diferente do professor, não sei se isso faz muita diferença.

https://github.com/Raul-Pinheiro/CursoFetchAPI-SPA

PS C:\Users\Raul\Desktop\FetchAPI> live-server
live-server : O termo 'live-server' não é reconhecido como nome de cmdlet, função, arquivo de script ou programa operável. Verifique a grafia do 
nome ou, se um caminho tiver sido incluído, veja se o caminho está correto e tente novamente.
No linha:1 caractere:1
+ live-server
+ ~~~~~~~~~~~
    + CategoryInfo          : ObjectNotFound: (live-server:String) [], CommandNotFoundException
    + FullyQualifiedErrorId : CommandNotFoundException

PS C:\Users\Raul\Desktop\FetchAPI>
solução!

Consegui resolver, finalmente. Para isso tive que instalar uma Extensão do live server no próprio VSCODE. Depois foi só clicar no icone Go Live e funcionou normal.