Level 1
From the image, it seems like it is a network error. What response does it give from postman?
Sep 14, 2017
4
Level 1
Vue connecting to Laravel API
I have been watching this tutorial, and I have a problem connecting Vue application to my Laravel API. https://www.youtube.com/watch?v=vu7l574xVao&list=PL55RiY5tL51rrgq6xi67Mc6cwOHXw_nB1
I keep getting network error in browser console for posting. I can get to laravel api url, and it is working in browser and postman, but when I put that same url in vue application in axios.post I just get error, cant fix it.
this is my axios post:
axios.post('http://vue.dev/api/quote', {content: this.quoteContent}) .then( (response) => console.log(response) ) .catch( (error) => console.log(error) );
this is an error:
Level 1
Could not get any response.
I am running this on my ubuntu virtual machine. I can access to my laravel api, and it is running great. But when in Vue application put my api url, as it is shown in the tutorial, it just doesn't working. I guess that there is maybe some problem because I am running all this in virtual machine, and I dont know I try to change ports, url, but nothing.
So I guess that in axios.post I should probably enter somehow another url because of running all on virtual machine? I dont know what to do. This is only app for practice, but soon I should work on a lot of others app.
Level 1
This is some new error that I have found
Failed to load http://127.0.0.1:8000/api/quote: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.
first url is my backend laravel api, second is vue app that is trying to connect to api.
Level 50
This is a common error. It's called CORS - Cross-Origin Resource Sharing. It's blocked by most servers as a security feature and has to be explicitly allowed to avoid getting the error. This package can help you get Laravel configured to allow it. https://github.com/barryvdh/laravel-cors
Please or to participate in this conversation.