Explicação super clara, finalmente consegui entender direito CORS! Gostei que tinha vários exemplos e mostrou direitino como fazer esse "debug" para saber qual parte falta configurar Muito obrigada :)
Parabéns pelo vídeo, excelente didática! Por favor, faça outro vídeo mostrando quando o back é uma aplicação spring boot e é preciso invocar endpoints com a função fetch, sem usar frameworks javascript.
É exatamente a mesma coisa: adicionar os cabeçalhos. Com um framework, provavelmente tem anotações que já fazem automaticamente. :-) Não é necessário um vídeo inteiro só pra isso. :-D
@@DiasDeDev O duro é que se trata de uma aplicação legada, cujo front é puro javascript sem framework algum, daí quero disparar requisições pra uma API springboot. Já configurei o cors na API e nada 😢
Excelente o conteúdo deste vídeo, como é de praxe e o que me surpreende é desse erro ocorrer com certa facilidade e ter pouco conteúdo produzido em português para isso, parabéns por produzir conteúdos que preenchem várias lacunas e tornando o conhecimento mais acessível.
A culpa sempre é do backend hahaha Estou estudando angular e integrando-o com uma api .net core. Esse vídeo serviu como uma luva A documentação da microsoft ensina certinho como tratar Muito obrigado!
Conteúdo super útil! Eu mesmo tenho esses problemas nos meus projetos de PHP mas nunca entendi a fundo. Agora estou estudando um pouco mais. Estou gostando do assunto.
Seria muito interessante ver como previnir csrf com php sem algum framework. E sua explicação nesse vídeo foi excelente, primeira vez que consigo entender esse assunto.
Cara, este video chegou pra mim na hora certa. Estava com o mesmo problema e exatamente com php como back end, ótimo video. Estou usando react como front, se eu quisesse dar um build e colocar tudo em um servidor so, esse processo seria necessário?
O que importa é o domínio. Se o domínio for o mesmo, não há problema de CORS. Mas a adição do cabeçalho é tão simples que não vale a pena mudar nada na infra só por isso.
Parabéns pela ótima explicação. Não sei se não prestei atenção, mas e quando eu não tenho acesso ao backend para realizar o ajuste dos cabeçalhos? No meu caso, estou trabalhando com uma integração com a API do pagseguro. Quando faço a requisição a partir do meu ambiente de desenvolvimento, estou tendo problemas com CORS. Tentei algumas extensões de navegador, mas sem sucesso. Eu consigo passar algum cabeçalho na requisição fetch para o servidor, solicitando que seja enviada a resposta independente da origem? Obrigado!
Não. Isso é algo a ser enviado pelo back-end mesmo. Nunca usei PagSeguro, mas não existe um cadastro onde você informa a URL da aplicação para que eles enviem o cabeçalho?
@@DiasDeDev Não achei dentro do sandbox deles. A documentação deles é um pouco confusa em relação às versões da API, tem muita coisa misturada. Estou trabalhando com essa requisição no backend do meu sistema mesmo para não perder tempo. Criei um endpoint dentro do sistema e faço as requisições com CURL no PHP. Foi o jeito mais simples que encontrei de resolver o problema no momento. Obrigado!
Ótima explicação como sempre. Duvida: Para Aplicativos móveis o CORS não influencia então? Como permitir acesso a API apenas p um aplicativo especifico feito p Android e iOS, independente do usuário (user com token)?
Não, com aplicativos móveis CORS não entram em questão. Você quer liberar uma API pra um app, mesmo que não haja usuário logado? API Key pode ser uma solução.
Muito bom, parabéns. Perguntinha de sempre rsrs. Pelo que entendi, você usou ali JS. Mas o resultado seria o mesmo se a requisição fosse feito com cURL do PHP em vez do fetch no JS. Assim ficaria comunicação de back para back e enviando o resultado para o navegador?
Flavio, como foi dito no vídeo, CORS é algo que **somente** os navegadores verificam. Se a requisição for feita por cURL (ou, por exemplo, pelo Postman como foi feito no vídeo), CORS não entra em questão.
Há pouco tempo passei por problema justamente neste cenário de uma requisição do cURL do PHP para uma API e ainda sim se fez necessário as configurações de headers como o Vinícius fala no vídeo.
@@o_brenoalmeida ainda não domino bem JS e cURL PHP seria mais amigável para mim. Entendi. Já uso CORS a um tempo mas em acesso originado de microcontroladores e recentemente surgiu uma necessidade de fazer comunicação com a api de um servidor para outro e achei a solução do Vinícius bem mais prática e se seria mesmo resultado do JS apresentado em relação ao resultado obtido com cURL. Obrigado pela observação.
faltou falar uma coisa, se o código faz alguma alteração, tipo deletar o ultimo registro e enviar um email, quando ele vai fazer o preflight e depois a requisição, ele deletaria dois registros e enviaria 2 emails?
Isso quem define é seu código, ué. Não tem a ver com o conceito de CORS, tem a ver com sua implementação do back-end. Se em uma requisição com o verbo OPTIONS seu back-end quiser fazer algo, ele pode. Vai ser uma implementação ruim, mas não existe nenhuma trava pra isso.
Estou tendo esse erro de header ao fazer uma requisição pelo Stoplight. mas pelo postman etc eu consigo. Porquê só o stopligth não consegue, mas outras aplicações conseguem? Alguém pode me ajudar?
Cara muito bom, consegue me ajudar!? Meu erro está sendo: ... been blocked by cors policy: response to preflight request doesn't pass access control check: it does not have http ok status... Já tentei de muitas formas, adicionando cabeçalhos na API caso seja OPTION... Mas não encontrei uma solução para isso. E como vc disse, no Postman foi certinho
Consegui resolver colocando o código: if($_SERVER['REQUEST_METHOD'] === 'OPTIONS'){ header('Content-Type: application/json; charset=UTF-8'); http_response_code(200); exit(); } no meu index(arquivos de rotas do backend php), eu já fazia essa verificação, mais fazia só lá no arquivo da api, ai como tinha uma verificação de erro de rota aqui no index, e não há rotas programadas com o verbo options, ele retornava automaticamente um 404.
Na verdade esse é o natural. Não só o tom de voz, mas até personalidades diferentes. Há pessoas que são mais divertidas em outro idioma, por exemplo. rsrsrsrs Mas realmente é curioso, né!? Eu me pergunto se bilíngues nativos também passam por isso.
No meu caso estou tentando acessar um arquivo.json, se digito na barra de endereço do navegador, abre normal. Mas se tento acessar via fetch(), apresenta o erro de cors. Será que tem como corrigir isso? PS não tenho acesso ao backend
Aproveitando como mostrar os erros em navegadores como o Chrome? Quando trabalhamos com API e acontece um erro 500 no Chrome não é possível ver o erro, mas no Firefox mostra. Alguém sabe o motivo?
infelizmente esse vídeo não resolve o meu problema pois eu não tenho acesso ao servidor que estou requisitando, com vbs eu consigo fazer a requisição, com js dá esse erro de CORS no edge e opera menos no Internet explore.
@@DiasDeDev Consegui resolver nossa gratidão a vc tava perdendo noites tentando resolver, e olha que fiz cada coisa complexa e rodou certinho mas o mais "basico" das configurações tava dando dor de cabeça coisas de Dev JR kkkk
Cara, não querendo dar uma de "minha nossa como sei falar inglês" mas você poderia forçar menos teu inglês... certas palavras nem precisam dessa ensebada que tu dá no teu ingl$es, quanto menos vc forçar melhor pra você e melhor pra quem quer te entender, teu conteúdo tá pra gente BR... Um exemplo da clara empiriquitada é que nas frases isoladas vc fala como qualquer um aqui fala e quando é isolado vc força o sotaque...
@@DiasDeDev resolvi adicionando o header para permitir qualquer origem na resposta, em uma função de autenticação. É um projeto simples para estudos então acho que não tem problema.
Cara que explicação perfeita. Perdi um tempão para descobrir que era o cabeçalho customizado que estava causando esse erro de cors
Que bom que foi útil, Alcides.
🤩
Cara, conteúdo sensacional ! São coisas do dia a dia que as vezes não damos a devida atenção. Muito obrigado pelo conteúdo 🤘🏽
Que bom que gostou, Denir. :-D
Explicação super clara, finalmente consegui entender direito CORS!
Gostei que tinha vários exemplos e mostrou direitino como fazer esse "debug" para saber qual parte falta configurar
Muito obrigada :)
Fico feliz que tenha ajudado!
Muito bom! Sugiro uma parte 2 abordando também erros como de protocolos diferentes (Same-origin policy).
Tá na lista pra eu fazer sim
Ajudou bastante aqui..
Pra quem tá usando SpringBoot, dá pra criar um "filter" e adicionar o cabeçalho em todas as responses.
Boa!
Tava faltando alguém detalhar esse erro que irrita tantos devs.
segurança kkkkkkkkk
#confia
Errinho chato, né!?
rsrsrs
@@DiasDeDev e como!
Quem desenvolve web e nunca teve problema com o maldito do cors, ainda não é dev
mano, salvouuuuuuuuuuuuuuuu, brabo demais cara. vou acompanhar sempre seu canal
Fico feliz. 😁
Didática sensacional e sempre um conteúdo muito bom!
Meus parabéns!
Que bom que gostou. :-D
Explicou mt bem, tô começando no backend agr, ajudou dr mais
Que bom que foi útil! :-D
Muito obrigado por compartilhar. Nota 10.
Eu que agradeço! :-D
Hoje mesmo estava "batendo cabeça" com esse problema na minha API em PHP. Esse vídeo veio em boa hora 😁 Muito obrigado prof. Vinícius!!
Que bom que ajudou!
😁
muito bom explicação, ajudou bastante a resolver um problema estava enfrentando.
Que bom que o vídeo ajudou :-D
Tava com esse mesmo problema em um servidor java, agradeço a ajuda
Que bom que foi útil! :-D
Fascinado pela sua maneira de ensinar, claro, objetivo e dinâmico. Ganhou um inscrito hoje!
Fico muito feliz que tenha gostado! Obrigado pelo retorno. :-D
Me ajudou obrigado 👏
Que bom que foi útil.
Muito boa a explicação!
Que bom que gostou! :-D
Adorei a explicação Vinícius! Vc é super didático!!!! Parabéns e Obrigada! =)
Fico feliz que tenha gostado!
Parabéns pelo vídeo, excelente didática! Por favor, faça outro vídeo mostrando quando o back é uma aplicação spring boot e é preciso invocar endpoints com a função fetch, sem usar frameworks javascript.
É exatamente a mesma coisa: adicionar os cabeçalhos. Com um framework, provavelmente tem anotações que já fazem automaticamente. :-) Não é necessário um vídeo inteiro só pra isso. :-D
@@DiasDeDev O duro é que se trata de uma aplicação legada, cujo front é puro javascript sem framework algum, daí quero disparar requisições pra uma API springboot. Já configurei o cors na API e nada 😢
Não entendi a relação. Rsrsrs
Os frameworks JS usam fetch por baixo dos panos. Não muda absolutamente nada.
Parabéns pelo conteúdo finalmente compreendi como funciona o cors :D
Fico feliz que tenha sido útil.
Animaaaaaal nunca vi uma explicação tão esclarecedora de CORS desculpa mas ptqpariiiiiiiiiu hahaha vlw mano 3 dias pra te achar po kkkkk agora sim
Hahahahah
Que bom que foi útil, xará!
cara sua explicação é sensasional, parabéns, quero aprender mais, já me tornei um inscrito
Fico feliz que tenha gostado! :-D
Excelente o conteúdo deste vídeo, como é de praxe e o que me surpreende é desse erro ocorrer com certa facilidade e ter pouco conteúdo produzido em português para isso, parabéns por produzir conteúdos que preenchem várias lacunas e tornando o conhecimento mais acessível.
Fico feliz demais que tenha gostado, Breno.
😁
Cara muito obrigado pelo vídeo! Me ajudou demais a resolver/entender uma duvida trivial.
Que bom que ajudou
Muito bem explicado, parabéns pelo conteúdo!
Que bom que gostou! :-D
Excelente!
Valeu!
Muito bom mesmo, 👏👏 acabou de desmistificar isso de uma vez por todas parabéns top
Valeu, Rafael. Que bom que gostou. :-D
A culpa sempre é do backend hahaha
Estou estudando angular e integrando-o com uma api .net core. Esse vídeo serviu como uma luva
A documentação da microsoft ensina certinho como tratar
Muito obrigado!
hahahah
Conteúdo super útil! Eu mesmo tenho esses problemas nos meus projetos de PHP mas nunca entendi a fundo. Agora estou estudando um pouco mais. Estou gostando do assunto.
Que bom que tem gostado, Fabiano. :-D
Seria muito interessante ver como previnir csrf com php sem algum framework. E sua explicação nesse vídeo foi excelente, primeira vez que consigo entender esse assunto.
Fico feliz demais por ter sido útil!
🤩
@@DiasDeDev eu que agradeço por vc estar compartilhando seu conhecimento. É muito bom aprender com a sua forma de explicar!
simples e no alvo! parabéns!!
Que bom que gostou
Entendi perfeitamente e resolveu meu problema, obrigado!
Que bom que ajudou
Nota 1000 essa explicação. Faz um vídeo sobre CSRF. Parabéns pelo conteúdo
Que bom que curtiu, Luís!
😁
Muito bom, muito obrigada!!!
Que bom que gostou, Camila. :-D
muito útil, obrigado!
Que bom que gostou
Como sempre o video é muito bom e muito necessário !!
Que bom que curtiu, Yuri! :-D
Isso é sempre um problema pra mim, Valew por ajudar a entender 🙌🏼 conteúdo sempre top!
Bem didático
Que bom que gostou. :-D
Cara bom!
Valeu! :-D
excelente
Que bom que gostou! :-D
Amei o conteúdo!
Que bom que gostou, Larissa!
Sucesso 🤜🤛
Valeu, Cesar. :-D
Excelente!
:-D
Cara, este video chegou pra mim na hora certa. Estava com o mesmo problema e exatamente com php como back end, ótimo video. Estou usando react como front, se eu quisesse dar um build e colocar tudo em um servidor so, esse processo seria necessário?
O que importa é o domínio. Se o domínio for o mesmo, não há problema de CORS. Mas a adição do cabeçalho é tão simples que não vale a pena mudar nada na infra só por isso.
Parabéns pela ótima explicação. Não sei se não prestei atenção, mas e quando eu não tenho acesso ao backend para realizar o ajuste dos cabeçalhos? No meu caso, estou trabalhando com uma integração com a API do pagseguro. Quando faço a requisição a partir do meu ambiente de desenvolvimento, estou tendo problemas com CORS. Tentei algumas extensões de navegador, mas sem sucesso. Eu consigo passar algum cabeçalho na requisição fetch para o servidor, solicitando que seja enviada a resposta independente da origem? Obrigado!
Não. Isso é algo a ser enviado pelo back-end mesmo.
Nunca usei PagSeguro, mas não existe um cadastro onde você informa a URL da aplicação para que eles enviem o cabeçalho?
@@DiasDeDev Não achei dentro do sandbox deles. A documentação deles é um pouco confusa em relação às versões da API, tem muita coisa misturada. Estou trabalhando com essa requisição no backend do meu sistema mesmo para não perder tempo. Criei um endpoint dentro do sistema e faço as requisições com CURL no PHP. Foi o jeito mais simples que encontrei de resolver o problema no momento. Obrigado!
Conteúdo ótimo como sempre, só o volume da trilha atrapalhou um pouco. Obrigado pelo vídeo!
Opa. Vou dar um toque na edição pros próximos. :-D
Valeu!
Ótima explicação como sempre. Duvida: Para Aplicativos móveis o CORS não influencia então? Como permitir acesso a API apenas p um aplicativo especifico feito p Android e iOS, independente do usuário (user com token)?
Não, com aplicativos móveis CORS não entram em questão. Você quer liberar uma API pra um app, mesmo que não haja usuário logado? API Key pode ser uma solução.
Amei
Que bom que gostou!
😊
Muito bom, parabéns. Perguntinha de sempre rsrs. Pelo que entendi, você usou ali JS. Mas o resultado seria o mesmo se a requisição fosse feito com cURL do PHP em vez do fetch no JS. Assim ficaria comunicação de back para back e enviando o resultado para o navegador?
Flavio, como foi dito no vídeo, CORS é algo que **somente** os navegadores verificam. Se a requisição for feita por cURL (ou, por exemplo, pelo Postman como foi feito no vídeo), CORS não entra em questão.
@@DiasDeDev Entendi. Obrigado.
Há pouco tempo passei por problema justamente neste cenário de uma requisição do cURL do PHP para uma API e ainda sim se fez necessário as configurações de headers como o Vinícius fala no vídeo.
@@o_brenoalmeida ainda não domino bem JS e cURL PHP seria mais amigável para mim. Entendi. Já uso CORS a um tempo mas em acesso originado de microcontroladores e recentemente surgiu uma necessidade de fazer comunicação com a api de um servidor para outro e achei a solução do Vinícius bem mais prática e se seria mesmo resultado do JS apresentado em relação ao resultado obtido com cURL. Obrigado pela observação.
E eu achando que o problema está no nextjs à horas, enquanto era na minha api que esqueci de adicionar o cors 🤣🤣
Valeu excelente tutorial.
Heheh
Que bom que foi útil.
Fala amigo, é necessário para essa configuração ter o cors instalado ou no front ou back?
Não se instala cors. O vídeo explica o que é o conceito e como atingir o resultado desejado.
faltou falar uma coisa, se o código faz alguma alteração, tipo deletar o ultimo registro e enviar um email, quando ele vai fazer o preflight e depois a requisição, ele deletaria dois registros e enviaria 2 emails?
Isso quem define é seu código, ué. Não tem a ver com o conceito de CORS, tem a ver com sua implementação do back-end. Se em uma requisição com o verbo OPTIONS seu back-end quiser fazer algo, ele pode. Vai ser uma implementação ruim, mas não existe nenhuma trava pra isso.
Cool!
:-D
Estou tendo esse erro de header ao fazer uma requisição pelo Stoplight. mas pelo postman etc eu consigo. Porquê só o stopligth não consegue, mas outras aplicações conseguem? Alguém pode me ajudar?
Como faz pra adicionar outras origens? Por exemplo requisições de 2 domínios diferentes ao invés de 1?
Só separar por vírgula, igual nos headers e métodos.
@@DiasDeDev valeu obrigado
Cara muito bom, consegue me ajudar!? Meu erro está sendo:
... been blocked by cors policy: response to preflight request doesn't pass access control check: it does not have http ok status...
Já tentei de muitas formas, adicionando cabeçalhos na API caso seja OPTION... Mas não encontrei uma solução para isso.
E como vc disse, no Postman foi certinho
Aparentemente a resposta da requisição OPTION tá retornando um status diferente de 200.
Bom dia, estou com o mesmo problema. Conseguiu achar uma solução?
Consegui resolver colocando o código:
if($_SERVER['REQUEST_METHOD'] === 'OPTIONS'){
header('Content-Type: application/json; charset=UTF-8');
http_response_code(200);
exit();
}
no meu index(arquivos de rotas do backend php), eu já fazia essa verificação, mais fazia só lá no arquivo da api, ai como tinha uma verificação de erro de rota aqui no index, e não há rotas programadas com o verbo options, ele retornava automaticamente um 404.
Bom conteúdo. Acho curioso como tem gente que muda o tom de voz de uma maneira muito engraçada quando tá pronunciando algo em inglês.
Na verdade esse é o natural. Não só o tom de voz, mas até personalidades diferentes. Há pessoas que são mais divertidas em outro idioma, por exemplo.
rsrsrsrs
Mas realmente é curioso, né!? Eu me pergunto se bilíngues nativos também passam por isso.
@@DiasDeDev Vejo muito isso, um cara que, ao meu ver, mantém o tom nas duas linguas é o Izzy Nobre kkk
No meu caso estou tentando acessar um arquivo.json, se digito na barra de endereço do navegador, abre normal. Mas se tento acessar via fetch(), apresenta o erro de cors. Será que tem como corrigir isso? PS não tenho acesso ao backend
O back-end que precisa liberar.
Finalmenteeeeeee entendi essa #*&@!
valeeu
Kkkkkk
Tamo junto
Aproveitando como mostrar os erros em navegadores como o Chrome?
Quando trabalhamos com API e acontece um erro 500 no Chrome não é possível ver o erro, mas no Firefox mostra. Alguém sabe o motivo?
Nunca me deparei com um caso onde o erro é exibido em um navegador mas não em outro.
@@DiasDeDev normalmente acontece isso quando é erro 500. No Chrome não mostra o response mas no Firefox mostra o response
Eu amando o estilo largado do Vinícius e ele aparece assim, todo arrumado de sombrancelha feita. Rsrs
Kkkkkk
Pensei que eu me arrumar mais fosse agradar a galera.
Jamais imaginei que alguém fosse preferir minha versão "quarentena"
😅🤣
@@DiasDeDev 🤣🤣🤣 eu me identifico muito com sua versão quarentena.
infelizmente esse vídeo não resolve o meu problema pois eu não tenho acesso ao servidor que estou requisitando, com vbs eu consigo fazer a requisição, com js dá esse erro de CORS no edge e opera menos no Internet explore.
A ideia do vídeo não é resolver seu problema, @jacob_segundo1176 kkkkkk
A ideia do vídeo é explicar o que é CORS, como funciona e como solucionar.
no meu caso esta tudo funcionando em local, mas so deu essa merda depois dque pushei online.ate agora estou tentando resolver
Após assistir o vídeo, algo não ficou claro?
Já que você tocou no assunto poderia ensinar oque cada header http faz
Salvaste mais uma alma! kkk
heheheh
Fico feliz em ser útil
Já fiz de tudo e esse erro bizarro não se resolve por nada
Não tem segredo. Não precisa "fazer de tudo". Só precisa adicionar os cabeçalhos na resposta mesmo. Como você os adicionou?
@@DiasDeDev 'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_methods' => ['*'],
'allowed_origins' => ['localhost:3000'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => false,
];
@@DiasDeDev Consegui resolver nossa gratidão a vc tava perdendo noites tentando resolver, e olha que fiz cada coisa complexa e rodou certinho mas o mais "basico" das configurações tava dando dor de cabeça coisas de Dev JR kkkk
@@andersonfernandes6083 como você resolveu?, estou passando por um problema parecido
não funcionava de jeito nenhum, mas do nada começou a funcionar. Eu estou perplexo.
Nem terminei o video e já digo que é culpa do front kkkkkk
hasushauash
Aí não, pow.
Mas esse header coloca ele aonde?
Na resposta.
Kkkk 20 vezes hoje esse erro tentando implementar o chatgpt
Kkkkkkkk
E quando for POST, de vez de GET
Muda nada
naum funciona
Cara, não querendo dar uma de "minha nossa como sei falar inglês" mas você poderia forçar menos teu inglês... certas palavras nem precisam dessa ensebada que tu dá no teu ingl$es, quanto menos vc forçar melhor pra você e melhor pra quem quer te entender, teu conteúdo tá pra gente BR... Um exemplo da clara empiriquitada é que nas frases isoladas vc fala como qualquer um aqui fala e quando é isolado vc força o sotaque...
Não vou mudar meu jeito de falar não. Mas valeu pelo comentário. 👍
Esse sotaque americano forcado e ridiculo
Obrigado por comentar e gerar engajamento. :-D
Por que o meu mesmo tendo todas as configurações de cors, ainda dá erro de preflight 🥲
Existem infinitas razões, mas se o erro tá logo no preflight, não é CORS. rsrsrs
@@DiasDeDev resolvi adicionando o header para permitir qualquer origem na resposta, em uma função de autenticação. É um projeto simples para estudos então acho que não tem problema.