Vue JS #2 - Use Axios to get data and resolve CORS issue
Vue JS #2 - Use Axios to get data and resolve CORS issue
Introduction:
Learn Vue JS with Real Project.
In this tutorial, I’ll show you how to use Axios to make API call and get data. I’ll also show you how to resolve CORS issue.
Project Demo:
http://bibekshakya.com/demo/vue/switc…
Useful Links:
GitHub - https://github.com/bibeva/Vue-Project…
Vue JS - https://vuejs.org/
Vue CLI - https://cli.vuejs.org/
Axios - https://vuejs.org/v2/cookbook/using-a…
Node JS - https://nodejs.org/
JSON Data - http://bibekshakya.com/demo/vue/switc…
Google Font - https://www.google.com/fonts
Font Awesome - https://fontawesome.com/
Text Editor - https://code.visualstudio.com/
Browser - https://www.google.com/chrome/
Gadgets I use for recording:
Laptop - https://amzn.to/3gv7sER
Monitor - https://amzn.to/3F3nZZU
Mic - https://amzn.to/3XywvXX
Headphone - https://amzn.to/3OEZ56g
Keyboard \u0026 Mouse - https://amzn.to/3AGAJTx
Screen Recorder - https://amzn.to/3Ew6H64
Buy me Beer:
https://www.paypal.me/bibekshakya
___________________________________________________________________________
#vueswitchablegrid #vuejs #vuejstutorial
Content
8.88 -> hi everyone my name is Bibek and this is the
second episode to create switchable grid using vue
17.92 -> js you are new to my channel then
please don't forget to subscribe
21.84 -> and hit the bell icon so you
never miss out my new tutorials
27.44 -> in the previous session we cloned and
ran the static switchable grid site
33.76 -> today we'll show the dynamic data using axios we
will also resolve the CORS issue because our site
42.32 -> is hosted locally and our data is hosted at other
domain first of all let's install axios using the
50.72 -> command line as this will help to call api
request in vue js so open your text editor
60.56 -> and in this terminal you can press ctrl c to stop
the server and you can type npm install axios
82.24 -> once it is installed you can run
the site again using npm run serve
101.84 -> now to use axios we can follow this
documentation from vue's official website
110.08 -> i have provided this link in the description below
112.88 -> if you want to know what axis is how
to use them along with some examples
122 -> so for now under this data we will
return content and assign a value of null
129.92 -> and under this mounted lifecycle hook we will use
133.44 -> axios and get the data and currently our
data is over here now let's get started
146.8 -> and the first thing we need to do is
we have to import axios from axios
160.64 -> then under this data i will set
the value of contents to null
169.68 -> now we need to add mounted lifecycle hook
so you can copy and paste it over here
178.64 -> and for the data you can copy
this url and replace it over here
187.52 -> also instead of this info it will be contents
195.52 -> we can now show the data using for loop
so i will go all the way to the top and
203.04 -> remove all of this except the first one
211.36 -> and in first i will use the for
loop it will be content in contents
220.72 -> and for key it will be content.id now to
get image from data you have to use :src
234.08 -> and over here it will be content.imageSrc
246.96 -> now let's do same for this list view as well
250.08 -> so again i will remove all of
this except the first one
259.68 -> then in i will add for loop
263.2 -> so again it will be content in
contents and the key will be content.id
273.52 -> for image you have to use colon
279.04 -> and then it will be content.imageSrc
286.32 -> for title you can use interpolation
using double curly braces
292.88 -> and title is coming from this
title so it will be content.title
300.4 -> likewise the description is
coming from here description
305.68 -> so you can remove and under the curly
braces you can add content.description
317.28 -> now if you check the site you won't see anything
over here and if you try to use developer tool to
324.72 -> check the console error you can see the error
over here saying access to xmlHttpRequest
332.4 -> at this from origin localhost has been
blocked by CORS policy we normally get
339.52 -> this kind of error if we try to get data
from different origin or domain for example
346.64 -> our site is running locally over here but
our data is coming from different domain
353.12 -> bibekshakya.com so to resolve this issue
in vue we got some documentation in vue cli
363.2 -> i will go to main page of this vue cli then first
you need to click on this config reference link
373.44 -> then if you don't have this vue.config.js file
you have to create one and then you have to add
380.48 -> module.export so in my case i don't have
that file so i'll be creating new file
390.64 -> call vue.config.js
397.76 -> then i can add module.exports now we have
to use something called devserver.proxy
412.08 -> so you can click on this link
415.76 -> you can then copy this devserver and proxy
428.48 -> you can then replace this
link with bibekshakya.com
434.64 -> and under this product component you
can then use this link of localhost
443.04 -> and replace it over here like this
now you can refresh the site again
455.68 -> and for some reason it is still
not showing let's check over here
462.64 -> and i did one mistake over here this vue.config.js
467.2 -> it should be inside this start folder so i
will cut and paste it inside start folder
477.76 -> you can now check the site again
482.08 -> and still there are some issue so what i will do
is i will go back to this product component again
489.76 -> and make some small changes over here
493.6 -> so in this response i will add
response.data now let's check the site again
505.44 -> and this time all the data is showing correctly
great this is the end of this session in the
514.56 -> next session we'll work on click events v-if
directive and add active class based on condition
523.76 -> feel free to comment below if you have any
questions also please don't forget to like share
530.56 -> and subscribe to my channel to get more
videos in the future if you want some
535.92 -> hosting companies you can check the link in the
description below thank you and see you soon
Source: https://www.youtube.com/watch?v=hbcnZ_GokBA