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

Monstro esse Mario. Parabéns mano, seus conteúdos são sempre muito didáticos.

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

Fera, sempre arrasando com as dicas #devsoutinho !!! Valew

Conteúdo muito bom!!! Sou fã desse canal.

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!

@DevSoutinho

Жыл бұрын

Po um comentário desses faz meu dia, valeu demais 😍

Simplesmente obrigado, ajudou demais!

Esse problema já infernizou minha vida. Valeu pelo vídeo!

Te amo de mais mano, eu tirei um peso das costa com esse video muito obrigado de coração vei

Até que enfim.... eu tinha resolvido, mas não sabia como!!! VLW

Muito boa a explicação, ajudou pra caramba!! Parabéns pelo vídeo!!

Muito bom Mario,,, Ótima dica. já apanhei muito com isso

Muito bom todos os vídeos e esse ajudou muito.

já tinha sofrido disso, resolvi na época mas n tinha detalhes de como a coisa funfava under the hood, muito bom!

Muito bom Mario, ajudou muito!!

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!

@cypriano

Жыл бұрын

como?

@mhcostapimenta

Жыл бұрын

@@cypriano No PHP que recebe os dados lá no servidor eu inseri no início do arquivo as seguintes linhas:

Perfeita a explicação man

Resolveu! Toma meu like e minha inscrição!

Caramba, tive esse problema ontem mesmo em um projeto aqui, e tinha deixado de lado, ai você solta esse vídeo. Estou com medo

Bom video brother!! Ganhou mais um inscrito.

Sem palavras, @Mario! Salvou hehehehe

Legal, ajudou muito. Valeu

Salvou de mais Mario, muito obg!

@DevSoutinho

2 жыл бұрын

Eu que agradeço 😁

Show! Vlw demais!

Salvou a minha vida!! vou deixar o like

@DevSoutinho

5 ай бұрын

Muuuuuitisssimo obrigado!

Mano eu recebi esse erro ontem kkkk, muito obrigado ajudou dms

Ótimo vídeo, ajudou muito.

Eu só posso deixarr o meu MUITO OBRIGADO kkkkkkkkkk, me ajudou muito!

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.

@DevSoutinho

2 жыл бұрын

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

@Ronaldo61

2 жыл бұрын

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

@joaomarcos.85

2 жыл бұрын

@@Ronaldo61 foi uma das coisas q o Mario citou no vídeo kkkk

@Ronaldo61

2 жыл бұрын

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

@joaomarcos.85

2 жыл бұрын

@@Ronaldo61 ele citou somente

Parabéns pelo trampo! Uma duvida em php não funcionou. Pode mostrar como se faz?

parabéns, mais claro impossível.

Mas é possível habilitar meu domínio por Script para fazer requisições com o servidor?

Muito F#da ajudou muito Soutinho vc é o cara

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

@DevSoutinho

2 ай бұрын

Isso aí!

cara você é muito brabo ajudou demais aqui

@DevSoutinho

Жыл бұрын

Fico feliz /ooooo valeu por comentar

Obrigado me ajudou muito

Obrigado, filhote! Um cheiro!

Esse cara é um deus pqpqpq

corszinho safado sempre causando problemas valeu mano

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.

Belo vídeo, tô fazendo um teste pra estágio e tá dando esse erro, agora lascou kkkkkkkkkk

Opaaa, agora me tira uma duvida, eu estou usando a api do notion e estou tendo esse erro, o que eu posso fazer???

mto bom!!

queria saber alguem me ajudace no wordpress no tema eu coloco este codigo onde ?

Show, man

amigo e quando a api já está em um servidor online? como faço pra liberar o acesso?

muito muito obrigado

Deparei-me com esse erro ontem e fiquei um bom tempo tentando entender como resolver kkkk

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

@DevSoutinho

Жыл бұрын

Quem fala isso não sabe o que tá falando ahahahahh

Oi, quando vai usar o IONIC para criar apps

Estou tentando entender como colocar essa informação na minha API do protheus mas não entendi.

Simples e conciso, muito bom! Existe algum motivo por usar yarn ao invés de NPM ou é uma questão de preferência?

@ramonpaolomaran2253

2 жыл бұрын

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

@rud___boy

2 жыл бұрын

@@ramonpaolomaran2253 saquei, obrigado pela dica Ramon!

@DanielRios549

2 жыл бұрын

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

E eu tentando resolver pelo clientside 😬muito obrigado 💙

@DevSoutinho

Жыл бұрын

Tmj!!!

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

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

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

@DevSoutinho

Жыл бұрын

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

tu é brabo

as bolinhas que ce apontou no video nao apareceram pra mim, normal isso?

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

@DevSoutinho

Жыл бұрын

Só existe no backend essa configuração, do lado do Front tu não muda nada

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?

@DevSoutinho

7 ай бұрын

Tu obrigatoriamente tem que ter um servidor fazendo a ponte pelo menos :/

aonde está o código ???

ta foda! meu powershell so faz multiplcação! ja desisti de tentar arrumar

@DevSoutinho

Жыл бұрын

Poxa :(

Como faco isso no javascript ou no php, alguem poderia me ajudar

Amazing

Cara, meu cors funciona no localhost, porém no Cloudflare Pages ele não aceita de jeito nenhum :/

minha dúvida é: como fazer isso usando JS puro??

@hudsonmenezesdev

Жыл бұрын

Minha dúvida também!

to sofrento pq uso o fastify e não vem dizendo onde configuro isso

como coloco isso em um servidor xampp ?

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á

@DevSoutinho

Жыл бұрын

Procura como setar headers no express, e depois da uma estudada sobre interceptors no express e a lib cors no NPM :D

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

o meu da esse erro por causa de uma imagem, o que eu faço

No Vuejs eu coloco essas configurações no Vite.config.js ??

@DevSoutinho

Жыл бұрын

Não, vc não faz isso no vue o backend que vc ta interagindo precisa fazer do lado dele.

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.

@felipeandree8

5 ай бұрын

eu tbm achei confuso isso

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!

@DevSoutinho

2 жыл бұрын

Valeu pelo comentário 😍🤝🎉 e que bom que o vídeo ajudou!

@leothomzz

2 жыл бұрын

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?

@JoaoVitor-zb3gp

Жыл бұрын

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.

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?

@DevSoutinho

Жыл бұрын

ai é só seguir o tutorial da lib mesmo \o

Em que lugar do código eu importo esse arquivo next.config.js?

@DevSoutinho

Жыл бұрын

Lugar nenhum, o próprio next lê o arquivo

Como fax pra configurar chaves ou limitar o acesso de outros agentes externos a API?.. Bom video!!!

@DevSoutinho

Жыл бұрын

Isso é lógica no backend, tu controla salvando a info do uso no banco de dados

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

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?

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

@trichains1

6 ай бұрын

sou iniciante só sei front end kk

@DevSoutinho

6 ай бұрын

@@trichains1 tu teria que alterar algo no WordPress pra poder bater. Procura sobre como habilitar CORS no WordPress

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

@DevSoutinho

Жыл бұрын

Olhando na aba network do browser, não vem o do backend?

@ribastudio

Жыл бұрын

@@DevSoutinho não. Até pq o next com m build, eu percebo que as requisicoes ou não aparecem explicitamente ou n sei ver.

@ribastudio

Жыл бұрын

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

Como funfar isso no angular??

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

@DevSoutinho

Жыл бұрын

Tu consegue colocar um backend no meio? Ou tem que ser via browser?

@AdelsonSilvaarms

Жыл бұрын

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

@DevSoutinho

Жыл бұрын

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

IRMÃO... só não te dou um beijo, daqueles de língua, pq vc tem essa aliança ae no dedo... PQ CARALHO, quase uma semana com esse problema e agora ta filé, não ta mais esse erro safado. VLW MAN

lenda

@DevSoutinho

Жыл бұрын

Tamo aí pra resolver as dúvida da humanidade hahahah

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?

@DevSoutinho

3 ай бұрын

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.

@amandalaureano7864

3 ай бұрын

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

@amandalaureano7864

3 ай бұрын

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

@DevSoutinho

3 ай бұрын

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

@amandalaureano7864

3 ай бұрын

@@DevSoutinho vou tentar!! Valeu demais!!!

Poderia soltar o código dessa "Aula" :(

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.

@DevSoutinho

11 ай бұрын

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

@mamutygamerfurtivo3783

11 ай бұрын

@@DevSoutinho Ele serve pra um contexto Vercel? Hospedei minha api la.

O link dos "valores que eu aplico para resolver o CORS" expirou!!

@DevSoutinho

Жыл бұрын

Atualizei! Valeu

Amigo, tem como tu colocar quais os headers que cê autorizou ? obg....

@DevSoutinho

Жыл бұрын

Opaa, coloquei na descrição!

@lucasbrigido4812

Жыл бұрын

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

Quero ver fazer funcionar na Vercel.

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

@DevSoutinho

Жыл бұрын

Os headers estão vindo na requisição quando vc ta colocando na aws? outra duvida, cogitou usar a vercel pro deploy?

Atualiza o video para Next14. Please...

Conseguir resolver problema, com uso do nuxt.js usando proxy do axios que tem na documentação e fiz deploy no heroku.

@DevSoutinho

2 жыл бұрын

Aeeeeee!

Mas a maioria dos DEVs que tem esse problema é justamente no frontend e não tem acesso ao backend, ficou na mesma.

@cristianoseixas2417

Жыл бұрын

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.

A ideia é apenas criar este arquivo e o backend se vira?

@DevSoutinho

Жыл бұрын

No caso o backend precisa sempre responder com os headers que eu mostro no vídeo

Tem como colocar mais de um origin?

@DevSoutinho

Жыл бұрын

Sim! separando por , ou ; se nao me engano

@carlsq1256

Жыл бұрын

@@DevSoutinho acho que ; finaliza a linha e da erro, se for é vírgula

namoral vei, uns 3 dias nisso já, fiz de tudo e em nenhum momento o yt indicou o vídeo

@DevSoutinho

8 ай бұрын

:((( mas deu certo agora??