FastAPI and React Full-stack Application: How to add COR to fastAPI

hello youtube welcome back to my channel so in the last row i've been able to send the email to the users using their id and we have been able to send their emails right here to the user right so our backend we have done almost all the functionality so it is now left before we go to the front end is to allow cross-origin resource sharing so what cross-origin resource sharing does it allows you to share uh resources from between different applications that are not running on the same like server or the same kind of machine all the same like url something like that so we need to allow calls in order to work because our react application is going to be a separate application from our first api application so for us to be able to uh coming to allow communication between this and not get the calls error whenever working it react we need to allow the course uh class to do we need to allow the react route in that to access our application so the react react applications run at port three three thousand right so localhost has put three thousand whenever you create a react app and if you learn about that we'll see about that whenever we will talk about that when you fabricate into uh uh into the into into of the front-end development so down here for to add code we need to import something so we need to save from sorry uh this is going to be course and just call it adding course headers okay so i'm going to say from first api that middle middleware uh that course we're going to import you're going to import a course middleware so just that so let's close this so we're going to record we're going to import cost middleware so now that we have that imported we'll just go down just after the app we're going to add in call it adding adding course uh urls okay so then it's going to uh add in here so we're going to call origins and this origins is just going to be a list so a list of a list of routes that you want to allow so i'm going to allow a react application so this direct application is running at http colon two first lashes and then local hosts output three thousand so that's the default route for a react application if you don't know about that you'll see about that we'll talk about this when you go into the uh front-end development and you also see this actually it's not anything like magical it's just there you can see it so uh local host so let me show you get this building right so it's local host at put 3000 and then yeah that's all we need to do so now you need to add come in here and then um add middle you're going to just add the so this is going to be add middle middle uh middle layer okay so going to call it at middleware and then it's going to be app uh sorry up dot um add underscore middleware and then this is gonna be a a tool so the first thing is going to be sorry the first thing is going to be this uh what you have just imported here paste that in there and then we're going to provide in allowed allow uh this is gonna be allow underscore origin allowed origins so it's gonna be allow origins if i get the spelling right so allow ori change so allow origins is going to be uh the origins that you have provided at the the origins list that you have defined up here so you can provide in more than one url in case you want to allow those those urls to access your server you can just provide independent origins list so you can say allow origins is going to be the old list of origins so i'm going to also allow credentials so i just got this from the official documentation so allow credentials this is going to be true and then we also need to pass in allow allow underscore methods so methods is going to be uh you're just going to press a list in here and then you're going to pass in an asterisk so we're going to allow all methods to have access to our server so also going to say allow underscore headers so allow headers is going to be also a list and then it's going to be everything so guys that's all we need to do in order to implement the course of application so in the next row go into front-end development and then you can see how this course can be really helpful for our application so this is all we need to do we have to cut at the course origin or across to allow cross origin for our application so we can go into front end try to refresh this to see if application is working so let's check here the back end so got unexpected error option allow credentials okay so uh allow credentials is actually allow credentials so go back here try to refresh this so you can see now application is all working so now we have that done next row go ahead and actually begin to write the front end so guys if you like this tutorial give it a thumbs up and subscribe to my youtube channel for more videos like this thanks for watching i'll keep saying see you in the next

Channel: Code With Prince

Views: 5,417

Keywords: Python, CORS, FastAPI, CORS headers fastpi, React, CORS Python, python, fastapi, api, python tutorial, learn python, python programming, pydantic, tutorial, apprendre fastapi, learn fastapi, tortoise orm, react for beginners, REST API, Programming, Building Rest API, database, async, fastapi restapi, fastapi asyncpg, asynchronous restapi in python, python restapi, python fastapi tutorial, fastapi cors, fastapi pydantic, fastAPI-mail, send email with fastapi, fastamp mail, fastapi email

Id: 14102ccnZ48

Length: 5min 6sec (306 seconds)

Published: Fri May 28 2021