O que é CORS - Resolvendo o erro No 'Access-Control-Allow-Origin' header is present | Dias de Dev

[@AlcidesBezerra]

Cara que explicação perfeita. Perdi um tempão para descobrir que era o cabeçalho customizado que estava causando esse erro de cors

[@DiasDeDev]

Que bom que foi útil, Alcides. 🤩

[@florencesarmah]

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 :)

[@DiasDeDev]

Fico feliz que tenha ajudado!

[@denirdamascenojr.1381]

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 🤘🏽

[@DiasDeDev]

Que bom que gostou, Denir. :-D

[@deyvisonrodrigo8893]

Ajudou bastante aqui.. Pra quem tá usando SpringBoot, dá pra criar um "filter" e adicionar o cabeçalho em todas as responses.

[@DiasDeDev]

Boa!

[@yagamikisuke]

Didática sensacional e sempre um conteúdo muito bom! Meus parabéns!

[@DiasDeDev]

Que bom que gostou. :-D

[@BwEngenharia-c9w]

mano, salvouuuuuuuuuuuuuuuu, brabo demais cara. vou acompanhar sempre seu canal

[@DiasDeDev]

Fico feliz. 😁

[@Macaco_D_Luffy3]

Explicou mt bem, tô começando no backend agr, ajudou dr mais

[@DiasDeDev]

Que bom que foi útil! :-D

[@onielsantiago7433]

Muito obrigado por compartilhar. Nota 10.

[@DiasDeDev]

Eu que agradeço! :-D

[@FelipeBarbosaGoogle]

Fascinado pela sua maneira de ensinar, claro, objetivo e dinâmico. Ganhou um inscrito hoje!

[@DiasDeDev]

Fico muito feliz que tenha gostado! Obrigado pelo retorno. :-D

[@programateiro]

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!!

[@DiasDeDev]

Que bom que ajudou! 😁

[@CidaLunacorteecostura]

Adorei a explicação Vinícius! Vc é super didático!!!! Parabéns e Obrigada! =)

[@DiasDeDev]

Fico feliz que tenha gostado!

[@adisonsoares2874]

Tava com esse mesmo problema em um servidor java, agradeço a ajuda

[@DiasDeDev]

Que bom que foi útil! :-D

[@programadorNasHorasVagas]

muito bom explicação, ajudou bastante a resolver um problema estava enfrentando.

[@DiasDeDev]

Que bom que o vídeo ajudou :-D

[@marciomuzzi]

Muito bom! Sugiro uma parte 2 abordando também erros como de protocolos diferentes (Same-origin policy).

[@DiasDeDev]

Tá na lista pra eu fazer sim

[@o_brenoalmeida]

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.

[@DiasDeDev]

Fico feliz demais que tenha gostado, Breno. 😁

[@niltonduarte3531]

Tava faltando alguém detalhar esse erro que irrita tantos devs.

[@dev.negoplay5457]

segurança kkkkkkkkk #confia

[@DiasDeDev]

Errinho chato, né!? rsrsrs

[@niltonduarte3531]

@@DiasDeDev e como!

[@Cookieukw]

Quem desenvolve web e nunca teve problema com o maldito do cors, ainda não é dev

[@samucatnb12]

cara sua explicação é sensasional, parabéns, quero aprender mais, já me tornei um inscrito

[@DiasDeDev]

Fico feliz que tenha gostado! :-D

[@i7informaticamt]

Muito bom mesmo, 👏👏 acabou de desmistificar isso de uma vez por todas parabéns top

[@DiasDeDev]

Valeu, Rafael. Que bom que gostou. :-D

[@ianalves5862]

Parabéns pelo conteúdo finalmente compreendi como funciona o cors :D

[@DiasDeDev]

Fico feliz que tenha sido útil.

[@OFabianoSilva]

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.

[@DiasDeDev]

Que bom que tem gostado, Fabiano. :-D

[@viniciuszanoli7950]

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

[@DiasDeDev]

Hahahahah Que bom que foi útil, xará!

[@claytonjatoba]

Muito bem explicado, parabéns pelo conteúdo!

[@DiasDeDev]

Que bom que gostou! :-D

[@bruxoleonardo]

Me ajudou obrigado 👏

[@DiasDeDev]

Que bom que foi útil.

[@HerlanLima]

Cara muito obrigado pelo vídeo! Me ajudou demais a resolver/entender uma duvida trivial.

[@DiasDeDev]

Que bom que ajudou

[@arthurlima4097]

Muito boa a explicação!

[@DiasDeDev]

Que bom que gostou! :-D

[@CoopeduRN]

Entendi perfeitamente e resolveu meu problema, obrigado!

[@DiasDeDev]

Que bom que ajudou

[@Samuel81672]

Excelente!

[@DiasDeDev]

Valeu!

[@Luisow748]

Nota 1000 essa explicação. Faz um vídeo sobre CSRF. Parabéns pelo conteúdo

[@DiasDeDev]

Que bom que curtiu, Luís! 😁

[@fernandonv78]

simples e no alvo! parabéns!!

[@DiasDeDev]

Que bom que gostou

[@dougtrue]

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!

[@DiasDeDev]

hahahah

[@antoniosergiosetino4097]

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.

[@DiasDeDev]

É 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

[@antoniosergiosetino4097]

​@@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 😢

[@DiasDeDev]

Não entendi a relação. Rsrsrs Os frameworks JS usam fetch por baixo dos panos. Não muda absolutamente nada.

[@yurioliveira6066]

Como sempre o video é muito bom e muito necessário !!

[@DiasDeDev]

Que bom que curtiu, Yuri! :-D

[@CesarLopes]

Sucesso 🤜🤛

[@DiasDeDev]

Valeu, Cesar. :-D

[@camilalordelo04]

Muito bom, muito obrigada!!!

[@DiasDeDev]

Que bom que gostou, Camila. :-D

[@JoaoPedro-uw8nz]

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.

[@DiasDeDev]

Fico feliz demais por ter sido útil! 🤩

[@JoaoPedro-uw8nz]

@@DiasDeDev eu que agradeço por vc estar compartilhando seu conhecimento. É muito bom aprender com a sua forma de explicar!

[@LoopUniversal]

muito útil, obrigado!

[@DiasDeDev]

Que bom que gostou

[@iridium-x7i]

excelente

[@DiasDeDev]

Que bom que gostou! :-D

[@brvl]

Bem didático

[@DiasDeDev]

Que bom que gostou. :-D

[@larissasilvaoficial3026]

Amei o conteúdo!

[@DiasDeDev]

Que bom que gostou, Larissa!

[@Trambulhao]

Excelente!

[@DiasDeDev]

:-D

[@maydana.programador]

Cara bom!

[@DiasDeDev]

Valeu! :-D

[@zegostoso5474]

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?

[@DiasDeDev]

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.

[@rafabl7]

Isso é sempre um problema pra mim, Valew por ajudar a entender 🙌🏼 conteúdo sempre top!

[@DiasDeDev]

[@FilipePetter]

Conteúdo ótimo como sempre, só o volume da trilha atrapalhou um pouco. Obrigado pelo vídeo!

[@DiasDeDev]

Opa. Vou dar um toque na edição pros próximos. :-D Valeu!

[@robsonvitor_m]

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!

[@DiasDeDev]

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?

[@robsonvitor_m]

@@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!

[@giovanisilva2597]

Ó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)?

[@DiasDeDev]

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.

[@superfortekiai]

E eu achando que o problema está no nextjs à horas, enquanto era na minha api que esqueci de adicionar o cors 🤣🤣 Valeu excelente tutorial.

[@DiasDeDev]

Heheh Que bom que foi útil.

[@RobsonLuisRamos]

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?

[@morganasampa]

Amei

[@DiasDeDev]

Que bom que gostou! 😊

[@FlavioAugustoToldo]

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?

[@DiasDeDev]

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.

[@micaeldouglassantana1598]

Cool!

[@DiasDeDev]

:-D

[@flaviovivinho4406]

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?

[@DiasDeDev]

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.

[@flaviovivinho4406]

@@DiasDeDev Entendi. Obrigado.

[@o_brenoalmeida]

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.

[@flaviovivinho4406]

@@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.

[@lsboissard]

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

[@DiasDeDev]

O back-end que precisa liberar.

[@reuelsiIva]

Fala amigo, é necessário para essa configuração ter o cors instalado ou no front ou back?

[@DiasDeDev]

Não se instala cors. O vídeo explica o que é o conceito e como atingir o resultado desejado.

[@michelfarias5679]

Como faz pra adicionar outras origens? Por exemplo requisições de 2 domínios diferentes ao invés de 1?

[@DiasDeDev]

Só separar por vírgula, igual nos headers e métodos.

[@michelfarias5679]

@@DiasDeDev valeu obrigado

[@asenhaeai]

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

[@DiasDeDev]

Aparentemente a resposta da requisição OPTION tá retornando um status diferente de 200.

[@professortiagoramos3599]

Bom dia, estou com o mesmo problema. Conseguiu achar uma solução?

[@professortiagoramos3599]

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.

[@brunobmorais]

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?

[@DiasDeDev]

Nunca me deparei com um caso onde o erro é exibido em um navegador mas não em outro.

[@brunobmorais]

@@DiasDeDev normalmente acontece isso quando é erro 500. No Chrome não mostra o response mas no Firefox mostra o response

[@musikrelax4809]

no meu caso esta tudo funcionando em local, mas so deu essa merda depois dque pushei online.ate agora estou tentando resolver

[@DiasDeDev]

Após assistir o vídeo, algo não ficou claro?

[@chessplayer2519]

Finalmenteeeeeee entendi essa #*&@! valeeu

[@DiasDeDev]

Kkkkkk Tamo junto

[@jacob_segundo1176]

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]

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.

[@natalirodriguesdasilva6312]

Eu amando o estilo largado do Vinícius e ele aparece assim, todo arrumado de sombrancelha feita. Rsrs

[@DiasDeDev]

Kkkkkk Pensei que eu me arrumar mais fosse agradar a galera. Jamais imaginei que alguém fosse preferir minha versão "quarentena" 😅🤣

[@natalirodriguesdasilva6312]

@@DiasDeDev 🤣🤣🤣 eu me identifico muito com sua versão quarentena.

[@alandre]

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.

[@DiasDeDev]

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.

[@alandre]

@@DiasDeDev Vejo muito isso, um cara que, ao meu ver, mantém o tom nas duas linguas é o Izzy Nobre kkk

[@SUN-rp8cf]

Já que você tocou no assunto poderia ensinar oque cada header http faz

[@ctkatch]

Salvaste mais uma alma! kkk

[@DiasDeDev]

heheheh Fico feliz em ser útil

[@andersonfernandes6083]

Já fiz de tudo e esse erro bizarro não se resolve por nada

[@DiasDeDev]

Não tem segredo. Não precisa "fazer de tudo". Só precisa adicionar os cabeçalhos na resposta mesmo. Como você os adicionou?

[@andersonfernandes6083]

@@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, ];

[@andersonfernandes6083]

@@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

[@EstudosGuimathis]

@@andersonfernandes6083 como você resolveu?, estou passando por um problema parecido

[@EstudosGuimathis]

não funcionava de jeito nenhum, mas do nada começou a funcionar. Eu estou perplexo.

[@LeticiaFerreira-se9pq]

Mas esse header coloca ele aonde?

[@DiasDeDev]

Na resposta.

[@reinaldosantosjr1503]

Nem terminei o video e já digo que é culpa do front kkkkkk

[@DiasDeDev]

hasushauash Aí não, pow.

[@caiosantosvargas]

Kkkk 20 vezes hoje esse erro tentando implementar o chatgpt

[@DiasDeDev]

Kkkkkkkk

[@orlandoberssane4663]

E quando for POST, de vez de GET

[@DiasDeDev]

Muda nada

[@hareku6676]

naum funciona

[@juliocesarpinheiro1339]

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]

Não vou mudar meu jeito de falar não. Mas valeu pelo comentário. 👍

[@BigSound406]

Esse sotaque americano forcado e ridiculo

[@DiasDeDev]

Obrigado por comentar e gerar engajamento. :-D

[@EstudosGuimathis]

Por que o meu mesmo tendo todas as configurações de cors, ainda dá erro de preflight 🥲

[@DiasDeDev]

Existem infinitas razões, mas se o erro tá logo no preflight, não é CORS. rsrsrs

[@guimathis]

​@@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.