How To Fix: "null has been blocked by CORS policy" Error in JavaScript AJAX

hey guys how you going my name is dom and today i'm going to be showing you how to fix this error right here now the reason for today's video is because i've gotten countless comments in the past on my javascript videos people asking me dom i'm getting this error how do i fix it it's frustrating etc so i'm going to be answering this question right now but of course the error in question says blah blah blah from original has been blocked by the cors policy so if you are getting this error this video should help you out hopefully now i'm going to be showing you the code which causes this error then of course the very simple fix now this website or application is supposed to be showing me the current weather information so of course inside this paragraph tag right here it's supposed to be some weather data so this weather data comes from this weather.json file which i'm trying to fetch or retrieve using ajax so of course i'm making the ajax request to the json file then of course i'm simply populating the data inside this paragraph tag now let's see the actual code for this web page so inside the text editor the code looks like this as we can see first off i'm including jquery the reason for using jquery is so i can use the ajax function right down here this error only occurs when using ajax you know the fetch api gives you a slightly different but similar error so of course you know generally i recommend you use fetch if you haven't used fetch before i've got plenty of videos on fetch if you want to check those out but anyway for the purposes of this video we're using ajax so of course i'm making an ajax request to this weather.json file this json file looks like this temperature and description so now once the response comes back i'm simply saying you know paragraph tag dot text content is equal to of course you know this string which tells me the weather information so what is causing this error well the code itself is fine the issue is not with your code the issue is with how you are showing your html going back in the browser as we can see right here i'm using the file protocol i'm loading up or i'm opening the html using you know control o i'm doing this ctrl o and i'm opening it up so this right here is what is causing your error you are getting the files directly from your system's hard drive now to fix this you need a web server okay now on the web you know around the globe all of the websites use a web server which is why this error typically won't occur in an actual website and only in development environments while you are coding by yourself you know locally so how do you get a web server well you've got two options well multiple options but basically right now i'm going to be showing you two options the first one is going to be using visual studio code and this one right here is going to be my recommended option so using visual studio code okay if you go to the extensions menu right up here do a search for live server if you open this up this extension right here and you install this extension you can now create a development server really easily so once it's done and installed you can then simply just press f1 to open up this menu then type in live server open with live server you press enter and now it's going to host a local development server giving you the files which you are working on so we can see right here got the index.html and of course it's working right the url is going to be you know one two seven zero zero one on port five five hundred whatever it might be right so this is your web server and we can see the error is no longer occurring so of course now you've got a web server between your file before it was your file on your hard drive then directly to the browser now it's going from file web server and then to the browser so that middle layer the web server is what's going to fix your issue now the second option looks like this using xampp so this right here examples amp however you pronounce it is a free local and easy to use web server which also gives you php now if you download this you install it you can then basically just include all of your websites files inside a directory called htdocs okay so once you've done that basically you do the exact same thing you know you go to your local host or whatever it might be and then you can go forward slash and you can access your information so that is your second option of course there are many more options out there different web servers things like that but of course if you want to get started definitely try and use vs code it is probably the simplest option now if you want you know more information on the cors policy i've got a whole video dedicated to that which i'll leave a link to below and also in the top right of this video but there you go hope this video helped thanks for watching guys and i'll see you in the next one

Channel: dcode

Views: 128,451

Keywords: cors, cross origin resource sharing, cors policy, ajax cors header, javascript ajax, javascript fetch api, access-control-allow-origin header, access control allow origin, http origin url, how to fix cors error, how to fix cors policy, javascript cors, http protocol, cross origin requests, cross-origin, cross origin http, same origin policy, cors headers

Id: nx8E5BF0XuE

Length: 6min 0sec (360 seconds)

Published: Tue Apr 13 2021