Coding

CORS | Laravel + Angular 2 / Vue.js 2

  • 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