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

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

[@yagamikisuke]

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

[@DiasDeDev]

Que bom que gostou. :-D

[@Macaco_D_Luffy3]

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

[@DiasDeDev]

Que bom que foi útil! :-D

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

[@BwEngenharia-c9w]

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

[@DiasDeDev]

Fico feliz. 😁

[@Samuel81672]

Excelente!

[@DiasDeDev]

Valeu!

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

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

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

[@adisonsoares2874]

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

[@DiasDeDev]

Que bom que foi útil! :-D

[@CidaLunacorteecostura]

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

[@DiasDeDev]

Fico feliz que tenha gostado!

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

[@claytonjatoba]

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

[@DiasDeDev]

Que bom que gostou! :-D

[@CoopeduRN]

Entendi perfeitamente e resolveu meu problema, obrigado!

[@DiasDeDev]

Que bom que ajudou

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

[@i7informaticamt]

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

[@DiasDeDev]

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

[@samucatnb12]

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

[@DiasDeDev]

Fico feliz que tenha gostado! :-D

[@ianalves5862]

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

[@DiasDeDev]

Fico feliz que tenha sido útil.

[@HerlanLima]

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

[@DiasDeDev]

Que bom que ajudou

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

[@arthurlima4097]

Muito boa a explicação!

[@DiasDeDev]

Que bom que gostou! :-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á!

[@fernandonv78]

simples e no alvo! parabéns!!

[@DiasDeDev]

Que bom que gostou

[@Luisow748]

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

[@DiasDeDev]

Que bom que curtiu, Luís! 😁

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

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

[@camilalordelo04]

Muito bom, muito obrigada!!!

[@DiasDeDev]

Que bom que gostou, Camila. :-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.

[@iridium-x7i]

excelente

[@DiasDeDev]

Que bom que gostou! :-D

[@LoopUniversal]

muito útil, obrigado!

[@DiasDeDev]

Que bom que gostou

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

[@maydana.programador]

Cara bom!

[@DiasDeDev]

Valeu! :-D

[@brvl]

Bem didático

[@DiasDeDev]

Que bom que gostou. :-D

[@larissasilvaoficial3026]

Amei o conteúdo!

[@DiasDeDev]

Que bom que gostou, Larissa!

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

[@CesarLopes]

Sucesso 🤜🤛

[@DiasDeDev]

Valeu, Cesar. :-D

[@Trambulhao]

Excelente!

[@DiasDeDev]

:-D

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

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

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

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

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

[@morganasampa]

Amei

[@DiasDeDev]

Que bom que gostou! 😊

[@micaeldouglassantana1598]

Cool!

[@DiasDeDev]

:-D

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

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

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

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

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

[@chessplayer2519]

Finalmenteeeeeee entendi essa #*&@! valeeu

[@DiasDeDev]

Kkkkkk Tamo junto

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

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

[@SUN-rp8cf]

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

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

[@ctkatch]

Salvaste mais uma alma! kkk

[@DiasDeDev]

heheheh Fico feliz em ser útil

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

[@reinaldosantosjr1503]

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

[@DiasDeDev]

hasushauash Aí não, pow.

[@LeticiaFerreira-se9pq]

Mas esse header coloca ele aonde?

[@DiasDeDev]

Na resposta.

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

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

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