Vue js, Nuxt, (materialize, viutify, Tailwindcss, Bootstrap), Laravel 8
Carlos, boa noite.
Eu tenho estudado bastante o Vue. Estou fazendo um projeto onde tenho algo parecido com Larafood ou o sistema laravel de assinaturas e tenho um site em Vue (SPA).
MInha ideia é fazer em SPA e depois instalar o nuxt para passar aquelas partes complicadas para atualização server para SSR.
È muito diferente já usar o nuxt? Você não tem um curso de Vue com nuxt tem?
Bom, estou fazendo o Vue fora do laravel por uma questão de entendimento de código mesmo.
Tenho uma dúvida:
Quando consumo uma API Jetstream laravel 8 pelo Vue externo ao laravel (docker), vue starto pelo nm run dev. Parece que localmetne nã consigo acessar porque os domínios são diferentes. Já passou por isso? Como posso resolver?
has been blocked by cors policy: request header field content-type is not allowed by access-control-allow-headers in preflight response.
Instalei um plugin no chrome (Cross Domain) mas não adiantou!
Na verdade preciso de uma orientação. Laravel vue integrado no mesmo laravel? Nada de nuxt por enquanto?
Laravel e vue separados?
Cabeça quente!!!
Olá, Marcos!
Tudo bem?
Não tenho curso de Nuxt ainda, mas como já domina bem o Vue.js, pode usar sem medo que vai conseguir lidar numa boa.
------------
Está tendo problema de CORS, como está o arquivo config/cors.php?
------------
Minha recomendação: Laravel API e Vue.js separado.
Bom dia.
Está como público
https://github.com/marcosbirrocalixto/spa_vue
Imagens:
https://ibb.co/m8bzYZ5
https://ibb.co/z5V387t
VocÊ falou do arquivo config/cors.php mas não tenho esse arquivo. no projeto (Nem Vue nem Laravel)
Estou com um componente gridvue declarado errado mas isso arrumo depois.
O problma está aqui
Access to XMLHttpRequest at 'http://projetosalacarte.local/api/sanctum/token' from origin 'http://localhost:8082' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
login.vue?cef9:44 Error: Network Error
at createError (createError.js?16d0:16)
at XMLHttpRequest.handleError (xhr.js?ec6c:84)
xhr.js?ec6c:177 POST http://projetosalacarte.local/api/sanctum/token net::ERR_FAILED
dispatchXhrRequest @ xhr.js?ec6c:177
xhrAdapter @ xhr.js?ec6c:13
dispatchRequest @ dispatchRequest.js?c4bb:52
Promise.then (async)
request @ Axios.js?5e65:61
Axios.<computed> @ Axios.js?5e65:87
wrap @ bind.js?24ff:9
login @ login.vue?cef9:36
boundFn @ vue.esm.js?efeb:191
click @ login.vue?bddf:70
invoker @ vue.esm.js?efeb:2004
fn._withTask.fn._withTask @ vue.esm.js?efeb:1802
Nesse print tem um erro diferente do que falou acima, que era de CORS: https://ibb.co/m8bzYZ5
Se ainda tiver com problemas de CORS, precisa resolver no backend, se for o Laravel (na versão 8.x fica em config/cors.php)
Qual a versão do seu backend Laravel?
Está usando o sanctum para autenticar a API?
Tem esse backend no GitHub?
Bom dia.
Laravel 8/JEtstream/Sanctum
Está como public
https://github.com/marcosbirrocalixto/projetosalacarte
https://github.com/marcosbirrocalixto/spa_vue
Não tenho o arquivo cors.php no confoig.
Obrigado
Eu tinha feito uns teste e estava dando erro de conexão mas testei agora novamnte e deu novamnete
Access to XMLHttpRequest at 'http://projetosalacarte.local/api/sanctum/token' from origin 'http://localhost:8082' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
login.vue?cef9:44 Error: Network Error
at createError (createError.js?16d0:16)
at XMLHttpRequest.handleError (xhr.js?ec6c:84)
xhr.js?ec6c:177 POST http://projetosalacarte.local/api/sanctum/token net::ERR_FAILED
dispatchXhrRequest @ xhr.js?ec6c:177
xhrAdapter @ xhr.js?ec6c:13
dispatchRequest @ dispatchRequest.js?c4bb:52
Promise.then (async)
request @ Axios.js?5e65:61
Axios.<computed> @ Axios.js?5e65:87
wrap @ bind.js?24ff:9
login @ login.vue?cef9:36
boundFn @ vue.esm.js?efeb:191
click @ login.vue?bddf:70
invoker @ vue.esm.js?efeb:2004
fn._withTask.fn._withTask @ vue.esm.js?efeb:1802
cadastro.vue?05ca:40 ok
cadastro:1 Access to XMLHttpRequest at 'http://projetosalacarte.local/api/client' from origin 'http://localhost:8082' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
cadastro.vue?05ca:50 Error: Network Error
at createError (createError.js?16d0:16)
at XMLHttpRequest.handleError (xhr.js?ec6c:84)
xhr.js?ec6c:177 POST http://projetosalacarte.local/api/client net::ERR_FAILED
https://ibb.co/SB4H3LV
Então amigo, no seu backend está faltando as configurações de CORS.
Confere nesse vídeo aqui, nele ensino como instalar o package oficial do Laravel para resolver estes problemas de CORS (gerar o arquivo config/cors.php):
https://academy.especializati.com.br/aula/atualizar-laravel-7-para-8
Eu fiz isso mas nçao está dando. Vou instalar a versçao 8 e fazer todo o upgrade na mão.
Hoje o cors só funciona se eu instalar uma extensão no chrome para desabilitar o filtro do navegador.
Vai dar um trabaho mas vou ficar mais seguro.
Valeu.
Chegou a instalar o package de cors do Laravel?
Aqui os detalhes de instalação:
https://github.com/fruitcake/laravel-cors
Precisa estar logado para conseguir responder a este ticket!
Clique Aqui Para Entrar!