Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
6
respostas

CORS com fetch API

Referente ao curso JavaScript: salvando dados localmente com IndexedDB, no capítulo Simplificando requisições Ajax com a Fetch API e atividade xmlHttpRequest: será que existe algo de mais alto nível?

por Ramires do nascimento Moreira
| 582.8k xp | 169 posts

Bom dia amigos eu preciso acessar um servidor que não está no mesmo domínio que o meu, no meu caso meu servidor está no localhost e o cliente está no file:///.

Quando eu faço a requisição com JQUERY funciona de boas. ex:

$.get("http://localhost:4567/api/dentista/",function(data){
        console.log(JSON.stringify(data) )
    })

insira seu código aqui

//result
//[{"id":1,"nome":"Felipe Cruz","crm":"5678-45","fones":["(85) 3434-2959","(85) 98787-2014"],"horariosDeAtendimento":[{"id":2,"hora":{"hour":10,"minute":30,"second":0,"nano":0},"dayOfWeek":"WEDNESDAY"},{"id":3,"hora":{"hour":7,"minute":30,"second":0,"nano":0},"dayOfWeek":"WEDNESDAY"}]},{"id":4,"nome":"Ramires Moreira","crm":"5678-45","fones":["(85) 3479-2959","(85) 98173-2014"],"horariosDeAtendimento":[{"id":5,"hora":{"hour":11,"minute":30,"second":0,"nano":0},"dayOfWeek":"WEDNESDAY"},{"id":6,"hora":{"hour":13,"minute":30,"second":0,"nano":0},"dayOfWeek":"WEDNESDAY"}]}]

Quando eu uso a fetch API ele não funciona o resp.json(), sendo que se eu abrir o console e olhar o RESPONSE da requisição eu vejo a resposta e minha resposta é 200.

obs: meu servidor está preparado para receber cors, tanto que funciona no JQUERY

Código servidor

//omitido
before((req,resp)->resp.header("Access-Control-Allow-Origin", "*"));
//omitido
6 respostas
por Mario Souto
| 377.3k xp | 735 posts
Alura Scuba Team Instrutor e Desenvolvedor

Ramires, evite usar o protocolo file:// você pode subir sempre um servidorzinho local com um módulo do node http-server por exemplo. O chrome bloqueia algumas requisições usando o file://

Agora para resolver esse problema do fetch, já tentou usando no-cors?

fetch(
            'http://localhost:8000/,
            {   method: 'POST',
                mode: 'no-cors',
        ...
     })
por Ramires do nascimento Moreira
| 582.8k xp | 169 posts

Mario estou usando o Mozila, e sim estou usando o mode:'no-cors'

sobre a questão de subir a aplicação em um servidor. Eu quero testar se a aplicação irá funcionar com requisição de outro servidor, por isso coloquei um no localhost e outro no file

por Ramires do nascimento Moreira
| 582.8k xp | 169 posts

Está assim

fetch("http://localhost:4567/api/dentista/",{
        mode:"no-cors",
        headers: {  
            "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"  
        },
    })
    .then(resp=>console.log(resp))
por Ramires do nascimento Moreira
| 582.8k xp | 169 posts

Boa tarde Mario, eu segui seu conselho de colocar para rodas em um servidor node mas o erro persiste.

fetch("http://localhost:4567/api/dentista/",{mode:"no-cors"})
    .then(data => console.log(data.json() ) )

//Response 
//body: null 
//bodyUsed: false
//headers: Headers {}
//ok: false
//redirected: false
//status: 0
//statusText: ""
//type: "opaque"
//"url: ""
por Fábio Henrique Vitor de Moraes Rosa
| 500.6k xp | 1 posts

before((req,resp)->resp.setHeader("Access-Control-Allow-Origin", "*"));

solução!
por Ramires do nascimento Moreira
| 582.8k xp | 169 posts

Consegui resolver o problema, na realidade tinha que deixar o modo como cors.