Fixed CORS Error In Angular Framework

hello guys welcome to in this video in this video I am going to show you how to resolve the cars here so here you can see uh I got this course here whenever I try to access the this API the user CPI and the API are running on my local system but the port numbers are different if that means they their URLs are not same so that's why the JavaScript is throwing this car's error so now let's see how to resolve this okay so in First Step what we have to do uh we have to create one uh Json file and now I'm going to creating this in file here inside the proxy config folder so uh so angular is a so angular provide the proxy configuration to bypass the outgoing request and now inside this folder we have to create one file which is the Devo dot proxy config.json you can name anything as you think better and inside this file ah so first uh so so first property which we have to give the end point of our API so I'm adding the all the endpoint API so like this uh forward slash and double star which is represent the global and now uh after that we have to inside this object we have to add the Target property so the target property is that means the our API URL so my API are running on my local system on the port number 4000 so I will add here the http double slash localhost and four thousand and after that the second property we have to add the secure so here I'm adding the true and the third property we have to add this change origin which is which is false so so I'm adding the change origin as a false because my apis are running on my local system so if if the apis are running on the remote server is that means different domain like api.com like this so we have to add here the true true value here okay so this will be change the origin of our local system to the different domain okay now let's see uh in second step what we have to do we have to go uh inside the angular.json file and inside the server configuration okay we have to add one property which is option and inside this option we have to add another one which is a proxy config and for that proxy config we have to add the path of that Json file now here you can see my Json file is located in a proxy config folder slash and the file name is deo proxy config dot Json so this is the second step we have to do so in First Step what we have done so we have created one Json file and in second step we have added this Json file inside the server config here and now it's the third step what we have to do uh we uh we have to pass the outgoing request through this ah currently running domain okay so here you can see uh my development server is running on the localhost colon 4200 so this is the dev server so using that Dev server the angular can pass the outgoing request okay bypass the outgoing request so we have to add this domain inside the div file environment.tsdo file so here we what we have to do we have to just change the port number because we are bypassing the outgoing request through this development server now this is done and so inside the API service you can see I am accessing the environment.epi URL and and passing through the HTTP client service as a URL and slash users okay so this is a third step in First Step what we have to do we have to restart our development server so I have stopped this development servers and restarting okay after restarted successfully so open the browser and refresh the current page so here you can see so I'm not got any considered now because this issue is now resolved and the apis are received as successfully and here you can see in header the API that are bypassing through the current development server okay the localhost colon 4200 which is the angular development server and I am bypassing the outgoing request to the as that server so guys I am recommending you guys just use this method for the development purpose not for the production thanks for watching guys

Channel: balaji admane

Views: 1,263

Keywords: angular framework, angular proxy server, proxy server, how to fix cors error in angular, how to fix cors error, web development, javascript, angular configuration

Id: wIBXzN-f63Q

Length: 6min 5sec (365 seconds)

Published: Thu Sep 21 2023