✅ Tem dúvidas sobre arquitetura de camadas? Tratamento de erros? Quais as bases para colocar um projeto no ar de forma automática com Integração Contínua? Conheça meu curso do canal o Construindo CRUDs com qualidae hotm.art/mWYNKk3
Ajudou muuuuuito, estou trabalhando numa aplicação usando o ReactJS no frontend e Python no backend. Fiquei um dia preso nessa questão, mas você me ajudou bastante, muito obrigado!!
Top demais! Estava fazendo um aplicativo html que roda local e acessava um PHP para receber os dados e escrever no banco. Não conseguia resolver o problema do cors até ver seu video! Agora funcionou!
Rapaz desta forma só vai conseguir resolver se você tiver mexendo com uma api interna que você tenha acesso! Mas muitas pessoas ainda vão continuar tendo problemas devido que este erro da normalmente quando ajente faz uma requisição em uma api externa tipo Binance e etc. Se você for uma destas pessoas saiba que este erro de CORS dado por servidores externos você só vai conseguir resolver somente, no back-end de forma bastante simples, basta criar um novo arquivo e fazer um redirecionamento para a url desejada.
O lance é que qualquer outra forma de “resolver” vc vai tá burlando algo saca? Provavelmente vc vai passar por isso usando um serviço próprio ou da empresa que tu trabalha e vai ter que abrir um ticket pra liberar ou algo do gênero
@@DevSoutinho Mas eu já tive este problema com a api pública da Binance! Eu até hoje uso extensões para burlar no meu robô, mas depois de um tempão eu fui descobrir que a maneira correta de fazer o tratamento e fazendo isso que eu citei. Eu uso um recurso do php chamado 'curl'. Com poucas linhas.
cara, valeu mesmo! conteúdo show. esse problema é uma dor de cabeça pra quem não teve nenhuma instrução e pensamentos sobre a comunicação entre navegadores e servidores. então estudar como funciona a internet, os protocolos de rede envolvidos, é muito importante!
Irmão, eu sempre tive esse problema e eu sempre o resolvi. Mas sempre tinha que ir no stack overflow e copiar tudo quanto era código até funcionar, inclusive coisas desnecessárias como especificar os headers no front. Agora pai, não tem mais erro! Valeu mesmo!
Basicamente, se você for fazer scrap ou usar api e der isso, é porque o servidor não ta te permitindo ter acesso. Eu vou testar aqui agora, mas acho que a solução é criar uma api que retorna o conteúdo do site, já que no backend não tem esse bloqueio
Pelo que entendi, cors pode ser usado após o usuário ser autenticado em uma aplicação, recebe autorização no navegador assim obtendo informações sensíveis dele no caso dentro da aplicação.
onde crio esse arquivo quando utilizar o react (com qual nome) , e teria como subir as opções denovo por que esta insdisponivel o repositorio com o arquivo completo
Estou fazendo testes com JEST em um front Nextjs e banco de testes/api teste. Coloco a mesma configuração do vídeo no next config, porém ao rodar o teste de api da o erro: Response for preflight has invalid HTTP status code 404. Porém a função chamada no teste retorna os dados da api, mas acontece esse erro junto. Teria então que configurar manual o back para aceitar o acesso do meu origin?
Oi amanda tudo bom? Em teoria se tu fez igual no vídeo n deveria ta rolando. Minha dúvida ficou: Como você ta fazendo uma chamada HTTP em um teste do jest? Esse erro só deveria acontecer no ambiente do browser. Em testes de unidade, tu pode usar uma lib como o nock e "mockar" a resposta HTTP.
@@DevSoutinho na verdade são testes de integração, onde subo um front e um back end através de features de teste, esse é um back de testes, então eu não mocko nada, chamo a api direto no teste e o componente que estou testando, estou usando jsdom como environment
@@DevSoutinho este erro aparece no console do teste do jest (terminal). Este teste que me refiro ao qual estou fazendo, retorna o valor certinho que a chamada da api faz, mas junto desse retorno vem este erro de preflight 404
@@amandalaureano7864 saquei… tu pode fazer o seguinte - olha quais Headers vem no response do backend quando vc faz o fetch no front - tenta forçar mandar os headers que eu customizo no vídeo do lado do Back e vê se muda 🤔
E se estou tentando apenas fazer webscraping e não tenho acesso a modificar o back-end? Estou fazendo com Vue 3, tenho que fazer os testes e implementações através do meu servidor e depois que subir teoricamente é pra funcionar?
Estou vendo o vídeo com dúvida. Eu subi um repositório (público) no gitHub, mas vi que a aplicação não está aceitando nenhum documento js, mas quando eu abro o documento dentro do editor de códigos, usando um live server, funciona normal. Vi também que quando abro pelo explorador de arquivo também não roda JS (Que eu preciso para rodar a aplicação). Obs: Eu sei que o servidor do GitHub só aceita documentos HTML, CSS e JS. Alguém que manja, poderia me ajudar por favor??
Tô tendo algo diferente. To usando NextJS com Axios, e o header Authorization, depois de logar, é adicionado ao default do Axios. Mas nunca chega no backend, porém aparece na requisição. o Erro é 's been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.' Ja revirei a net e nada até agora
Ótima explicação. Como você disse se é o servidor backend que é responsável por permitir o acesso de endereços diferentes, não entendo por que o pessoal fala em configurar o CORS no Angular/FrontEnd? Fica aí a minha dúvida. Nos mais muito obrigado!
cara eu to quebrando a cabeça já faz algumas semana nisso mds, me da uma luz ai, to tendo esse problema ai porem minha API REST está hospedada pelo infinityfree com o wordpress e to requisitando ela pelo meu aplicativo via Vite React hospedada no vercel mas n vai de jeito nenhum
Descobri o meu problema de cross origin. Era que no Banco estava int e n9 código estava str. No xamp funcionava mas remoto não.. Pois no Banco remoto errei um atributo. Coloquei int sem querer
Pensando em uma API Stateless, que não guarda cookies e tal, se ela for exposta pro mundo tá safe. O problema do allow * é se você não fez uma API corretamente e ela guarda estado, aí alguém pode fazer algum tipo de ataque.
Esse video é exclusivo pra quem esta usando o NEXT.js? o titulo do video nao especifica isso porem next.config.js é pra next.js e foi a unica forma de resolução.
Não é exclusivo de NextJS. Headers fazem parte do protocolo HTTP, independente da ferramenta de Back End você pode adicionar esses headers no projeto \o
Muito bom o vídeo, mas e no caso de a API não ter essa opção incluída de permissão de CORS, o que devemos fazer? Isso não foi explicado. Se poder dizer como resolver, agradeço.
@@DevSoutinho blz, até aí também ok, mas no caso de eu querer consumir de uma API pública por ex, onde eu não tenho acesso, só consigo fazer um fetch() mesmo, e aí como resolver? Uma coisa que eu fiz aqui pra burlar isso foi usar uma extensão do chrome que permite/bloquei o uso do CORS.
Tô passando pelo mesmo problema, só que com angular no front e back end java com spring security e api gateway. Acabei de descobrir que é meu api gateway que tá barrando as requisições do front angular. Foi uma mão na roda entender o problema, pois na internet não achei em nenhum canto explicando o motivo do bloqueio!
Que legal Valmir. Estou com o mesmo problema, a única diferença para o seu cenário é que no meu caso o back end é em .Net Core. Qual configuração você aplicou no api gateway para conseguir vencer o CORS?
Boa tarde Valmir, como você descobriu que sua api gateway está barrando e qual foi a solução. Já tentei pela parte do back-end mas sem êxito, acredito que o meu problema esteja por lá mesmo.
Estou com esse erro: Requisição cross-origin bloqueada: A diretiva Same Origin (mesma origem) não permite a leitura do recurso remoto falha na resposta de comprovação (preflight) do CORS Tenho um frontend em ReactJS e backend em PHP. No teste no Insomnia, funciona perfeitamente. No index.php do backend, coloquei isso aqui, mas não adiantou:
@@DevSoutinho sim. Tenho várias telas que enviam requisições para esse backend funcionando de boa. Somente uma tela que deu esse erro. Mas vou colocar as configurações da forma como vc recomenda pra ver se dá certo.
@@DevSoutinho cara obrigado, só que agora minha requisição POST virou option.....e tou chorando pra resolver...hahaha, tanto a post como a put.. tudo tá assim
Preferência mesmo A diferença, é que o yarn é um pouco mais rapo para instalar os pacotes E tbm não precisa usar o "run" para executar um script do package.json
@@ramonpaolomaran2253 O Yarn também não fica modificando o arquivo de lock quando vc roda um install, no NPM tem que usar o NPM CI se não me engano, ele é mais chatinho quanto a isso
@@DevSoutinho meio que consegui achar onde estava dando erro, esse erro está sendo na parte do axios não sei pq tipo minha baseURL está certa porem ele continua dando erro. Vou tentar resolver aqui, muito obrigado pela paciência.
Fala Mário, mto bem explicado cara, mas infelizmente ainda não sanou o meu problema. Nesse exemplo que vc mostrou, vc usa uma api que vc msm tem o controle de definir ali as regras do cors. No meu caso, eu preciso acessar uma api do Office 365 SharePoint pra obter algumas informações. A requisições funcionam perfeitamente em outras aplicações, cm vc msm explicou, porém no navegador não funciona. Queria saber se tem como saber quais regras temos q passar nesse caso
Hj a solução já esta assim meu amigo.. Tenho uma api que já acessa esses dados. Assim funciona. Porém gostaria que não tivesse essa ponte. Vlw obrigado pelo feedback
@@AdelsonSilvaarms olha da uma pesquisada por JSONP, se a microsoft implementou vai funcionar stackoverflow.com/questions/2067472/what-is-jsonp-and-why-was-it-created
Parabens pelo vídeo! Sempre conteúdos incríveis! Uma duvida, estou com um problema semelhante em um projeto Reactjs + API Wordpress. Como eu faria esse ajuste? Estou iniciando meus estudos e esbarrei nessa questão e não tenho encontrado soluções para isso em minhas pesquisas :/
No WordPress acho que é via alguma config no arquivo htaccess 🤔 da uma olhada na parte de WP api que deve ter coisa sobre “setup custom headers” aí tu aplica o vídeo
Obrigaado mesmo, mas olha só, mais especificamente COMO resolver o problema É o meu problema, Estou usando o XAMPP com um servidor Apache. Estou procurando onde mudar o arquivo next.config.js que vc falou, mas até agora estou nadando em águas profundas sem avistar terra firme. Alguém pode me ajudar?
Vi este vídeo mas agora não consegui solucionar este erro que aparece no meu :( Fiz um portfólio em Next.js e estou listando artigos que estão no Notion. No local funcionou de boa, mas quando fiz Deploy na AWS... Tô quase desistindo de ter blog dinâmico kkkkk
Eu tive esse mesmo problema ao fazer scrapping por dentro de uma extensão Chrome que criei que busca dados uma página, onde eu capturava os dados e tentava fazer um post para gravar em um banco que criei, porém parei no cors ao fazer a requisição. A solução foi criar uma outra extensão e usar um recurso chamado sendMessage onde eu enviei os dados para outra extensão que fica ouvindo e dessa outra extensão eu faço o post. Eu poderia usar um selenium, ou pupetter, porém para o meu caso acho extensões Chrome mais interessantes para fazer scrapping.
Quase indo comer pizza, mas antes descarregando o like p variar. N Faria sentido o client autorizar. E a segurança iria onde? Kkkk vlw 5:15 - n ficou tão claro n hehe vou ouvir de novo mais tarde rs Esses dias tentei fazer fetch o Google e deu cors kkk
✅ Tem dúvidas sobre arquitetura de camadas? Tratamento de erros? Quais as bases para colocar um projeto no ar de forma automática com Integração Contínua? Conheça meu curso do canal o Construindo CRUDs com qualidae hotm.art/mWYNKk3
Muito bem explicado! Tinha dúvidas sobre o CORS e você esclareceu tudo! Muito obrigado!
Ajudou muuuuuito, estou trabalhando numa aplicação usando o ReactJS no frontend e Python no backend. Fiquei um dia preso nessa questão, mas você me ajudou bastante, muito obrigado!!
Mario Souto muito obrigado por esse vídeo. serio salvou o meu dia, faz 4 dias que estou tentando resolver esse problema kkkkkk, muito obrigadooo
Top demais! Estava fazendo um aplicativo html que roda local e acessava um PHP para receber os dados e escrever no banco. Não conseguia resolver o problema do cors até ver seu video! Agora funcionou!
como?
@@cypriano No PHP que recebe os dados lá no servidor eu inseri no início do arquivo as seguintes linhas:
Rapaz desta forma só vai conseguir resolver se você tiver mexendo com uma api interna que você tenha acesso! Mas muitas pessoas ainda vão continuar tendo problemas devido que este erro da normalmente quando ajente faz uma requisição em uma api externa tipo Binance e etc. Se você for uma destas pessoas saiba que este erro de CORS dado por servidores externos você só vai conseguir resolver somente, no back-end de forma bastante simples, basta criar um novo arquivo e fazer um redirecionamento para a url desejada.
O lance é que qualquer outra forma de “resolver” vc vai tá burlando algo saca? Provavelmente vc vai passar por isso usando um serviço próprio ou da empresa que tu trabalha e vai ter que abrir um ticket pra liberar ou algo do gênero
@@DevSoutinho Mas eu já tive este problema com a api pública da Binance! Eu até hoje uso extensões para burlar no meu robô, mas depois de um tempão eu fui descobrir que a maneira correta de fazer o tratamento e fazendo isso que eu citei. Eu uso um recurso do php chamado 'curl'. Com poucas linhas.
@@Ronaldo61 foi uma das coisas q o Mario citou no vídeo kkkk
@@joaomarcos.85 Então eu não prestei atenção, por que eu assistir o vídeo completo e não vi a parte que ele explica!
@@Ronaldo61 ele citou somente
cara, valeu mesmo! conteúdo show. esse problema é uma dor de cabeça pra quem não teve nenhuma instrução e pensamentos sobre a comunicação entre navegadores e servidores. então estudar como funciona a internet, os protocolos de rede envolvidos, é muito importante!
Po um comentário desses faz meu dia, valeu demais 😍
Irmão, eu sempre tive esse problema e eu sempre o resolvi. Mas sempre tinha que ir no stack overflow e copiar tudo quanto era código até funcionar, inclusive coisas desnecessárias como especificar os headers no front. Agora pai, não tem mais erro! Valeu mesmo!
Cara... Sem palavras sabe muito!
@@Ro-gt6nw fico feliz de ajudar!
Mas é possível habilitar meu domínio por Script para fazer requisições com o servidor?
Monstro esse Mario. Parabéns mano, seus conteúdos são sempre muito didáticos.
Muito boa a explicação, ajudou pra caramba!! Parabéns pelo vídeo!!
Fera, sempre arrasando com as dicas #devsoutinho !!! Valew
Não entendi onde colocar e chamar esse arquivo.
Na raiz do htdocs?
Na raiz do projeto?
E onde chama esse código?
Ficou muito confuso.
eu tbm achei confuso isso
Concordo. Eu fiquei até o final achando que ele ia falar onde chamar o código. Foi um vídeo incompleto, aff
Salvou a minha vida!! vou deixar o like
Muuuuuitisssimo obrigado!
Basicamente, se você for fazer scrap ou usar api e der isso, é porque o servidor não ta te permitindo ter acesso. Eu vou testar aqui agora, mas acho que a solução é criar uma api que retorna o conteúdo do site, já que no backend não tem esse bloqueio
Isso aí!
Esse problema já infernizou minha vida. Valeu pelo vídeo!
Pelo que entendi, cors pode ser usado após o usuário ser autenticado em uma aplicação, recebe autorização no navegador assim obtendo informações sensíveis dele no caso dentro da aplicação.
queria saber alguem me ajudace no wordpress no tema eu coloco este codigo onde ?
onde crio esse arquivo quando utilizar o react (com qual nome)
, e teria como subir as opções denovo por que esta insdisponivel o repositorio com o arquivo completo
Só existe no backend essa configuração, do lado do Front tu não muda nada
Te amo de mais mano, eu tirei um peso das costa com esse video muito obrigado de coração vei
Estou fazendo testes com JEST em um front Nextjs e banco de testes/api teste. Coloco a mesma configuração do vídeo no next config, porém ao rodar o teste de api da o erro: Response for preflight has invalid HTTP status code 404. Porém a função chamada no teste retorna os dados da api, mas acontece esse erro junto. Teria então que configurar manual o back para aceitar o acesso do meu origin?
Oi amanda tudo bom? Em teoria se tu fez igual no vídeo n deveria ta rolando. Minha dúvida ficou: Como você ta fazendo uma chamada HTTP em um teste do jest? Esse erro só deveria acontecer no ambiente do browser.
Em testes de unidade, tu pode usar uma lib como o nock e "mockar" a resposta HTTP.
@@DevSoutinho na verdade são testes de integração, onde subo um front e um back end através de features de teste, esse é um back de testes, então eu não mocko nada, chamo a api direto no teste e o componente que estou testando, estou usando jsdom como environment
@@DevSoutinho este erro aparece no console do teste do jest (terminal). Este teste que me refiro ao qual estou fazendo, retorna o valor certinho que a chamada da api faz, mas junto desse retorno vem este erro de preflight 404
@@amandalaureano7864 saquei… tu pode fazer o seguinte
- olha quais Headers vem no response do backend quando vc faz o fetch no front
- tenta forçar mandar os headers que eu customizo no vídeo do lado do Back e vê se muda 🤔
@@DevSoutinho vou tentar!! Valeu demais!!!
Conteúdo muito bom!!! Sou fã desse canal.
Até que enfim.... eu tinha resolvido, mas não sabia como!!! VLW
E se estou tentando apenas fazer webscraping e não tenho acesso a modificar o back-end? Estou fazendo com Vue 3, tenho que fazer os testes e implementações através do meu servidor e depois que subir teoricamente é pra funcionar?
Tu obrigatoriamente tem que ter um servidor fazendo a ponte pelo menos :/
as bolinhas que ce apontou no video nao apareceram pra mim, normal isso?
corszinho safado sempre causando problemas valeu mano
Resolveu! Toma meu like e minha inscrição!
Estou vendo o vídeo com dúvida. Eu subi um repositório (público) no gitHub, mas vi que a aplicação não está aceitando nenhum documento js, mas quando eu abro o documento dentro do editor de códigos, usando um live server, funciona normal. Vi também que quando abro pelo explorador de arquivo também não roda JS (Que eu preciso para rodar a aplicação).
Obs: Eu sei que o servidor do GitHub só aceita documentos HTML, CSS e JS.
Alguém que manja, poderia me ajudar por favor??
Cara, meu cors funciona no localhost, porém no Cloudflare Pages ele não aceita de jeito nenhum :/
Tô tendo algo diferente. To usando NextJS com Axios, e o header Authorization, depois de logar, é adicionado ao default do Axios. Mas nunca chega no backend, porém aparece na requisição. o Erro é 's been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.' Ja revirei a net e nada até agora
Olhando na aba network do browser, não vem o do backend?
@@DevSoutinho não. Até pq o next com m build, eu percebo que as requisicoes ou não aparecem explicitamente ou n sei ver.
@@DevSoutinho consegui ver. no meu GEt tem o Authorization, na resposta que volta com 401, metódo OPTION vem isso:
Request URL: [minha url de get]
Request Method: OPTIONS
Status Code: 401
Response headers:
access-control-allow-credentials: true
Access-Control-Allow-Headers: access-control-allow-credentials,access-control-allow-methods,access-control-allow-origin,authorization
access-control-allow-methods: *
access-control-allow-origin: ***omitted***
access-control-expose-headers: access-token
allow: GET, PUT, POST, DELETE, HEAD, OPTIONS, PATCH, PROPFIND, PROPPATCH, MKCOL, COPY, MOVE, LOCK
content-length: 80
content-security-policy: default-src 'self';base-uri 'self';font-src 'self' https: data:;form-action 'self';frame-ancestors 'self';img-src 'self' data:;object-src 'none';script-src 'self';script-src-attr 'none';style-src 'self' https: 'unsafe-inline';upgrade-insecure-requests
content-type: application/json; charset=utf-8
cross-origin-embedder-policy: require-corp
cross-origin-opener-policy: same-origin
cross-origin-resource-policy: same-origin
No Vuejs eu coloco essas configurações no Vite.config.js ??
Não, vc não faz isso no vue o backend que vc ta interagindo precisa fazer do lado dele.
amigo e quando a api já está em um servidor online? como faço pra liberar o acesso?
cara você é muito brabo ajudou demais aqui
Fico feliz /ooooo valeu por comentar
Caramba, tive esse problema ontem mesmo em um projeto aqui, e tinha deixado de lado, ai você solta esse vídeo. Estou com medo
E se ao invés desse arquivo de configuração do CORS não existir, e eu usar uma lib do próprio CORS para usar em um middleware? Como faria?
ai é só seguir o tutorial da lib mesmo \o
Ótima explicação. Como você disse se é o servidor backend que é responsável por permitir o acesso de endereços diferentes, não entendo por que o pessoal fala em configurar o CORS no Angular/FrontEnd? Fica aí a minha dúvida. Nos mais muito obrigado!
Quem fala isso não sabe o que tá falando ahahahahh
cara eu to quebrando a cabeça já faz algumas semana nisso mds, me da uma luz ai, to tendo esse problema ai porem minha API REST está hospedada pelo infinityfree com o wordpress e to requisitando ela pelo meu aplicativo via Vite React hospedada no vercel mas n vai de jeito nenhum
sou iniciante só sei front end kk
@@trichains1 tu teria que alterar algo no WordPress pra poder bater. Procura sobre como habilitar CORS no WordPress
Estou tentando entender como colocar essa informação na minha API do protheus mas não entendi.
Mas como eu resolveria este problema em um backend Node usando Express ??
Se puder responder por favor, estou com esse problema a um tempo já
Procura como setar headers no express, e depois da uma estudada sobre interceptors no express e a lib cors no NPM :D
Sem palavras, @Mario!
Salvou hehehehe
Salvou de mais Mario, muito obg!
Eu que agradeço 😁
E eu tentando resolver pelo clientside 😬muito obrigado 💙
Tmj!!!
Descobri o meu problema de cross origin.
Era que no Banco estava int e n9 código estava str.
No xamp funcionava mas remoto não..
Pois no Banco remoto errei um atributo.
Coloquei int sem querer
Em que lugar do código eu importo esse arquivo next.config.js?
Lugar nenhum, o próprio next lê o arquivo
aonde está o código ???
Bom video brother!! Ganhou mais um inscrito.
Simplesmente obrigado, ajudou demais!
to sofrento pq uso o fastify e não vem dizendo onde configuro isso
eu to fazendo um projetinho com meu irmão , e deu erro de CORS pq ele errou a url ...eu tenho pesadelos até hoje com o CORSa
Adicionar "Access-Control-Allow-Origin": "*" oferece riscos?
Pensando em uma API Stateless, que não guarda cookies e tal, se ela for exposta pro mundo tá safe.
O problema do allow * é se você não fez uma API corretamente e ela guarda estado, aí alguém pode fazer algum tipo de ataque.
Muito F#da ajudou muito Soutinho vc é o cara
como coloco isso em um servidor xampp ?
Muito bom Mario,,, Ótima dica. já apanhei muito com isso
Muito bom todos os vídeos e esse ajudou muito.
Como fax pra configurar chaves ou limitar o acesso de outros agentes externos a API?.. Bom video!!!
Isso é lógica no backend, tu controla salvando a info do uso no banco de dados
Como faco isso no javascript ou no php, alguem poderia me ajudar
Parabéns pelo trampo! Uma duvida em php não funcionou. Pode mostrar como se faz?
Esse video é exclusivo pra quem esta usando o NEXT.js? o titulo do video nao especifica isso porem next.config.js é pra next.js e foi a unica forma de resolução.
Não é exclusivo de NextJS.
Headers fazem parte do protocolo HTTP, independente da ferramenta de Back End você pode adicionar esses headers no projeto \o
@@DevSoutinho Ele serve pra um contexto Vercel? Hospedei minha api la.
Muito bom Mario, ajudou muito!!
Legal, ajudou muito. Valeu
Muito bom o vídeo, mas e no caso de a API não ter essa opção incluída de permissão de CORS, o que devemos fazer? Isso não foi explicado. Se poder dizer como resolver, agradeço.
Se a API não devolver, vc teria que criar uma rota no seu backend e via essa rota fazer o request
@@DevSoutinho blz, até aí também ok, mas no caso de eu querer consumir de uma API pública por ex, onde eu não tenho acesso, só consigo fazer um fetch() mesmo, e aí como resolver? Uma coisa que eu fiz aqui pra burlar isso foi usar uma extensão do chrome que permite/bloquei o uso do CORS.
Perfeita a explicação man
Opaaa, agora me tira uma duvida, eu estou usando a api do notion e estou tendo esse erro, o que eu posso fazer???
O link dos "valores que eu aplico para resolver o CORS" expirou!!
Atualizei! Valeu
Obrigado, filhote! Um cheiro!
Tô passando pelo mesmo problema, só que com angular no front e back end java com spring security e api gateway. Acabei de descobrir que é meu api gateway que tá barrando as requisições do front angular. Foi uma mão na roda entender o problema, pois na internet não achei em nenhum canto explicando o motivo do bloqueio!
Valeu pelo comentário 😍🤝🎉 e que bom que o vídeo ajudou!
Que legal Valmir. Estou com o mesmo problema, a única diferença para o seu cenário é que no meu caso o back end é em .Net Core. Qual configuração você aplicou no api gateway para conseguir vencer o CORS?
Boa tarde Valmir, como você descobriu que sua api gateway está barrando e qual foi a solução. Já tentei pela parte do back-end mas sem êxito, acredito que o meu problema esteja por lá mesmo.
minha dúvida é: como fazer isso usando JS puro??
Minha dúvida também!
Esse cara é um deus pqpqpq
o meu da esse erro por causa de uma imagem, o que eu faço
ta foda! meu powershell so faz multiplcação! ja desisti de tentar arrumar
Poxa :(
Tem como colocar mais de um origin?
Sim! separando por , ou ; se nao me engano
@@DevSoutinho acho que ; finaliza a linha e da erro, se for é vírgula
Estou com esse erro: Requisição cross-origin bloqueada: A diretiva Same Origin (mesma origem) não permite a leitura do recurso remoto
falha na resposta de comprovação (preflight) do CORS
Tenho um frontend em ReactJS e backend em PHP. No teste no Insomnia, funciona perfeitamente.
No index.php do backend, coloquei isso aqui, mas não adiantou:
Faz tempo que não mexo com PHP, mas isso aí contempla GET e OPTIONS?
@@DevSoutinho sim. Tenho várias telas que enviam requisições para esse backend funcionando de boa. Somente uma tela que deu esse erro. Mas vou colocar as configurações da forma como vc recomenda pra ver se dá certo.
Testei. Não deu certo.
Amigo, tem como tu colocar quais os headers que cê autorizou ? obg....
Opaa, coloquei na descrição!
@@DevSoutinho cara obrigado, só que agora minha requisição POST virou option.....e tou chorando pra resolver...hahaha, tanto a post como a put.. tudo tá assim
Simples e conciso, muito bom! Existe algum motivo por usar yarn ao invés de NPM ou é uma questão de preferência?
Preferência mesmo
A diferença, é que o yarn é um pouco mais rapo para instalar os pacotes
E tbm não precisa usar o "run" para executar um script do package.json
@@ramonpaolomaran2253 saquei, obrigado pela dica Ramon!
@@ramonpaolomaran2253 O Yarn também não fica modificando o arquivo de lock quando vc roda um install, no NPM tem que usar o NPM CI se não me engano, ele é mais chatinho quanto a isso
Ótimo vídeo, ajudou muito.
Oi, quando vai usar o IONIC para criar apps
modifiquei meu código e agora ele já está certo, porem continua dando o mesmo erro.
Quando vc olha na aba network, os headers aparecem? Existe um cache no browser, tenta usar outro navegador só pra teste
@@DevSoutinho aparece o localhost que estou usando de backend duplicado, e um deles está em vermelho.
@@augusto4586 n é duplicado, é a chamada com o OPTIONS, certo?
@@DevSoutinho meio que consegui achar onde estava dando erro, esse erro está sendo na parte do axios não sei pq tipo minha baseURL está certa porem ele continua dando erro. Vou tentar resolver aqui, muito obrigado pela paciência.
eu nao to conseguindo em vue.js 3 ta dando o mesmo erro.......
Mas o problema é no server não no Front :/ a API que vc ta acessando tem que adicionar o código do vídeo
api no codeldignet 3
nao tem como voce fazer um video com vue.js e codeldignet 3
Eu só posso deixarr o meu MUITO OBRIGADO kkkkkkkkkk, me ajudou muito!
já tinha sofrido disso, resolvi na época mas n tinha detalhes de como a coisa funfava under the hood, muito bom!
parabéns, mais claro impossível.
Fala Mário, mto bem explicado cara, mas infelizmente ainda não sanou o meu problema.
Nesse exemplo que vc mostrou, vc usa uma api que vc msm tem o controle de definir ali as regras do cors.
No meu caso, eu preciso acessar uma api do Office 365 SharePoint pra obter algumas informações.
A requisições funcionam perfeitamente em outras aplicações, cm vc msm explicou, porém no navegador não funciona.
Queria saber se tem como saber quais regras temos q passar nesse caso
Tu consegue colocar um backend no meio? Ou tem que ser via browser?
Hj a solução já esta assim meu amigo..
Tenho uma api que já acessa esses dados. Assim funciona.
Porém gostaria que não tivesse essa ponte.
Vlw obrigado pelo feedback
@@AdelsonSilvaarms olha da uma pesquisada por JSONP, se a microsoft implementou vai funcionar stackoverflow.com/questions/2067472/what-is-jsonp-and-why-was-it-created
Como funfar isso no angular??
Mano eu recebi esse erro ontem kkkk, muito obrigado ajudou dms
A ideia é apenas criar este arquivo e o backend se vira?
No caso o backend precisa sempre responder com os headers que eu mostro no vídeo
Show! Vlw demais!
Parabens pelo vídeo! Sempre conteúdos incríveis!
Uma duvida, estou com um problema semelhante em um projeto Reactjs + API Wordpress. Como eu faria esse ajuste? Estou iniciando meus estudos e esbarrei nessa questão e não tenho encontrado soluções para isso em minhas pesquisas :/
No WordPress acho que é via alguma config no arquivo htaccess 🤔 da uma olhada na parte de WP api que deve ter coisa sobre “setup custom headers” aí tu aplica o vídeo
Obrigaado mesmo, mas olha só, mais especificamente COMO resolver o problema É o meu problema, Estou usando o XAMPP com um servidor Apache. Estou procurando onde mudar o arquivo next.config.js que vc falou, mas até agora estou nadando em águas profundas sem avistar terra firme. Alguém pode me ajudar?
Vi este vídeo mas agora não consegui solucionar este erro que aparece no meu :(
Fiz um portfólio em Next.js e estou listando artigos que estão no Notion. No local funcionou de boa, mas quando fiz Deploy na AWS...
Tô quase desistindo de ter blog dinâmico kkkkk
Os headers estão vindo na requisição quando vc ta colocando na aws? outra duvida, cogitou usar a vercel pro deploy?
Belo vídeo, tô fazendo um teste pra estágio e tá dando esse erro, agora lascou kkkkkkkkkk
Atualiza o video para Next14. Please...
Mas a maioria dos DEVs que tem esse problema é justamente no frontend e não tem acesso ao backend, ficou na mesma.
Eu tive esse mesmo problema ao fazer scrapping por dentro de uma extensão Chrome que criei que busca dados uma página, onde eu capturava os dados e tentava fazer um post para gravar em um banco que criei, porém parei no cors ao fazer a requisição.
A solução foi criar uma outra extensão e usar um recurso chamado sendMessage onde eu enviei os dados para outra extensão que fica ouvindo e dessa outra extensão eu faço o post.
Eu poderia usar um selenium, ou pupetter, porém para o meu caso acho extensões Chrome mais interessantes para fazer scrapping.
Conseguir resolver problema, com uso do nuxt.js usando proxy do axios que tem na documentação e fiz deploy no heroku.
Aeeeeee!
Obrigado me ajudou muito
Quero ver fazer funcionar na Vercel.
Quase indo comer pizza, mas antes descarregando o like p variar.
N Faria sentido o client autorizar. E a segurança iria onde? Kkkk vlw
5:15 - n ficou tão claro n hehe vou ouvir de novo mais tarde rs
Esses dias tentei fazer fetch o Google e deu cors kkk
Deparei-me com esse erro ontem e fiquei um bom tempo tentando entender como resolver kkkk
muito muito obrigado
namoral vei, uns 3 dias nisso já, fiz de tudo e em nenhum momento o yt indicou o vídeo
:((( mas deu certo agora??