- 00:00:01 welcome back to this series on
- 00:00:03 connecting lateral to angular 2 or view
- 00:00:07 J s we already achieved a lot we set up
- 00:00:10 the back end and we generally also
- 00:00:13 started setting up the angular 2 front
- 00:00:15 end but now we're stuck we're getting an
- 00:00:18 error when trying to get all quotes that
- 00:00:21 we some are not allowed to access this
- 00:00:24 because no access control allow
- 00:00:25 originator is present now this is called
- 00:00:29 course or this is an issue connected to
- 00:00:33 chorus and course stands for
- 00:00:34 cross-origin resource sharing I already
- 00:00:37 explained this in the last video of this
- 00:00:38 series you are generally not allowed to
- 00:00:41 have a different front end and back end
- 00:00:43 server different domains talking to each
- 00:00:47 other and here we're serving angle two
- 00:00:49 from localhost 4200 and we try to reach
- 00:00:53 out to this domain so we do have two
- 00:00:55 different domains oftentimes it's kind
- 00:00:58 of fishy if some average service tries
- 00:01:01 to access your service therefore it's
- 00:01:03 denied by default but for api's which
- 00:01:06 are kind of common today we build a lot
- 00:01:09 of backends which can connect to all
- 00:01:11 kinds of front-end mobile apps web apps
- 00:01:14 and so on in nowadays this is something
- 00:01:17 we want to enable on our back ends or at
- 00:01:20 least at the API backends we're building
- 00:01:22 expressed specifically for that purpose
- 00:01:24 and we can enable this axis we can kind
- 00:01:27 of turn off that protection because we
- 00:01:30 want to turn it off and we have to turn
- 00:01:32 it off on our back-end so we're leaving
- 00:01:35 angular 2 now and we'll go back to our
- 00:01:38 lateral application the application we
- 00:01:41 built a few videos ago here we got our
- 00:01:44 routes and now we want to make sure that
- 00:01:47 we're able to target these routes from a
- 00:01:51 different domain to do so I will create
- 00:01:55 a new middle where you can create a new
- 00:01:58 middleware for level with the artisan
- 00:02:01 command-line tool so in the level folder
- 00:02:03 here I'll run PHP artisan make
- 00:02:06 middleware and I'll name it course
- 00:02:10 because it's connected to
- 00:02:14 cross-origin resource sharing problem
- 00:02:16 we're having in the application we now
- 00:02:19 got this course PHP file in the middle
- 00:02:21 aware folder in the app HTTP folder this
- 00:02:25 is almost empty it only has this handle
- 00:02:28 method now middleware is basically some
- 00:02:31 or are some functions which are run on
- 00:02:34 all requests and responses reaching
- 00:02:38 level and we can decide if we want to
- 00:02:41 work with the requests or the response I
- 00:02:44 will show you how both works so this SD
- 00:02:47 middleware created and now this will not
- 00:02:50 be used we have to tell they're able to
- 00:02:52 use this middleware we do so in the
- 00:02:55 kernel PHP file and here we can hook up
- 00:02:58 our own middleware and now you could
- 00:03:00 think that we add our own middleware to
- 00:03:04 the API middleware group here because it
- 00:03:07 makes sense we're having a couple of API
- 00:03:09 routes in the API PHP file here in the
- 00:03:13 routes folder and as I explained in
- 00:03:16 earlier video in this series the
- 00:03:18 middlewares setup here in the API group
- 00:03:22 are applied to all routes in the API
- 00:03:25 folder this would be the right way of
- 00:03:28 thinking about it but when sending
- 00:03:31 requests from our client from inner tube
- 00:03:34 to the server and when those requests
- 00:03:38 are not get requests but post put and so
- 00:03:41 on there actually will be an extra
- 00:03:45 options request sent before that that's
- 00:03:48 just some feature of your browser you
- 00:03:51 could say that's the default behavior if
- 00:03:53 you send a post request your browser
- 00:03:55 will automatically send an options
- 00:03:57 request first options kind of tries to
- 00:04:00 find out which options do I have are am
- 00:04:03 I allowed to send a post request here
- 00:04:05 and of course you are allowed but your
- 00:04:07 browser does know that and to tackle
- 00:04:10 this extra extra options request which
- 00:04:14 we can't stop from being created I
- 00:04:16 actually will add my milla we're not
- 00:04:18 here in the route group but actually
- 00:04:21 here in the middle of where array which
- 00:04:24 basically just means the middleware is
- 00:04:26 set up in this
- 00:04:27 ray are applied to all requests not just
- 00:04:31 the requests reaching out to my API
- 00:04:34 middleware group and actually it doesn't
- 00:04:37 even matter because this level
- 00:04:39 application will only serve as a
- 00:04:41 back-end anyways and there's nothing
- 00:04:44 wrong with applying our course
- 00:04:46 middleware to all requests now as a side
- 00:04:50 note you can also download some
- 00:04:51 third-party packages which make it very
- 00:04:53 easy for you to really fine-tune which
- 00:04:57 routes should add those course headers
- 00:05:00 and which route should not here I will
- 00:05:02 show you the general easy approach so
- 00:05:05 enough of the talking let's add our
- 00:05:08 course middleware here in the middle of
- 00:05:10 where array in the kernel PHP file and
- 00:05:13 the middleware lives in the app HTTP
- 00:05:19 middleware namespace and here in the
- 00:05:21 course file and we need to access the
- 00:05:24 class so pass this course class as an
- 00:05:27 element in this array with that now this
- 00:05:31 handle method will be executed on each
- 00:05:33 request entering our application and we
- 00:05:39 get two arguments here the request and a
- 00:05:42 closure called next next is executed
- 00:05:46 here and it gets the request as an
- 00:05:49 argument and this simply means let you
- 00:05:52 request continue its journey if we don't
- 00:05:54 call next we will actually stop the
- 00:05:57 request in our application will
- 00:05:59 therefore break because the request
- 00:06:01 doesn't reach the route it should reach
- 00:06:03 now if we want to change that request we
- 00:06:06 can do that before returning next
- 00:06:09 request here so we could set any header
- 00:06:12 here but I don't want to set a header on
- 00:06:15 my request I want to add some headers on
- 00:06:19 the response and we do this by adding
- 00:06:22 them on the result of this next call
- 00:06:24 which will actually be our response here
- 00:06:28 I can access the header method which is
- 00:06:31 a method level nose which allows me to
- 00:06:32 add some headers and here we need to add
- 00:06:35 free headers one header is actually
- 00:06:38 listed here in the browser access
- 00:06:40 control
- 00:06:41 origin this header is missing as the
- 00:06:43 arrow message so let's simply copy it
- 00:06:46 add it here as the first argument to the
- 00:06:48 header method as a string and the second
- 00:06:52 argument is the value and with star I'm
- 00:06:54 simply telling the application any
- 00:06:57 client any other domain may access
- 00:07:01 well my routes and you could of course
- 00:07:04 also instead be very specific about
- 00:07:07 which domain or domain should be able to
- 00:07:09 access your routes but here every domain
- 00:07:12 is allowed
- 00:07:12 I need another header though so header
- 00:07:16 and our header method chained and this
- 00:07:19 is called access control allow so with
- 00:07:22 this start of your header you pretty
- 00:07:25 much recognize that it is connected to
- 00:07:27 the course problem X control allow
- 00:07:31 methods so with methods which methods
- 00:07:35 are allowed to be sender which HTTP
- 00:07:38 methods way may we use well I want to
- 00:07:41 allow get post purge patch delete and
- 00:07:48 they're important options because this
- 00:07:50 is this extra request I was talking
- 00:07:52 about this extra request which is
- 00:07:54 generated and sent and of course you can
- 00:07:56 also limit that to D methods you need
- 00:07:58 and then I'll add a third header here
- 00:08:01 access control allow headers which
- 00:08:08 headers may be requests which the client
- 00:08:11 sends hold and I want to allow the
- 00:08:13 content type and you could also allow an
- 00:08:17 authorization header and much more now
- 00:08:21 with this setup here if I save this the
- 00:08:25 middleware is set up it is added in the
- 00:08:27 kernel file let's try getting the quotes
- 00:08:30 in our front and application again here
- 00:08:33 you see some quote now it's fetched
- 00:08:36 successfully because now we're allowing
- 00:08:38 the access and we're allowing our angle
- 00:08:41 to application to access our back-end
- 00:08:44 even though we're having different
- 00:08:46 domains here now in the next video I
- 00:08:48 will finish this angle to application
- 00:08:50 and enable it to also add an
- 00:08:53 added and delete quotes before we then
- 00:08:55 continue to view KS see you there bye
