1 00:00:02,160 --> 00:00:06,170 CORS stands for a cross origin resource sharing. 2 00:00:06,260 --> 00:00:08,110 Now the idea beyond CORS is simple, 3 00:00:08,130 --> 00:00:10,950 you have some applications, some web site running on yourpage.com, 4 00:00:10,950 --> 00:00:16,980 for example our find a place application where we see something on the screen and pick a location 5 00:00:18,000 --> 00:00:19,730 and then we have another server, 6 00:00:19,800 --> 00:00:26,760 for example our backend with these two routes we added, othersite.com which you want to talk to from 7 00:00:26,760 --> 00:00:28,150 your first page. 8 00:00:28,410 --> 00:00:34,800 So we get these two applications, maybe we build both of them but they're running on different servers 9 00:00:35,220 --> 00:00:36,600 as it is the case for us, 10 00:00:36,600 --> 00:00:41,580 one is running on localhost:3000, the other on localhost:8080 and these are technically two 11 00:00:41,580 --> 00:00:43,410 different servers. 12 00:00:43,410 --> 00:00:48,840 Now we might want to exchange some resources, that could be a script which we want to fetch from the 13 00:00:48,840 --> 00:00:49,580 other side, 14 00:00:49,650 --> 00:00:54,960 we can send a request and get it but it could also be a request which we want to send to the other 15 00:00:54,960 --> 00:01:04,260 side. And now by default, browsers block such cross origin requests, only requests to the same origin, so 16 00:01:04,260 --> 00:01:06,150 to the same domain, are allowed, 17 00:01:06,150 --> 00:01:12,920 so on yourpage.com, we could only communicate with any routes that are registered on the same server, 18 00:01:12,930 --> 00:01:14,860 not on a different server. 19 00:01:14,880 --> 00:01:19,130 Now this exists for a good reason because by default, you of course want to protect resources, 20 00:01:19,230 --> 00:01:26,340 you shouldn't be able to fetch any data from any server but in the modern web, where this setup of having 21 00:01:26,340 --> 00:01:29,900 standalone API servers is quite common, 22 00:01:29,910 --> 00:01:32,840 you of course want to be able to eject from this default, 23 00:01:32,850 --> 00:01:39,480 you want to tell the browser that this access is OK. So in our example here, on the backend, so on the 24 00:01:39,480 --> 00:01:46,890 Node.js server and always on the backend when you have CORS issues, we have to set some extra headers 25 00:01:47,280 --> 00:01:53,820 that signal to the browser that this is fine, that this access is fine, that we're allowing this access 26 00:01:53,940 --> 00:01:55,140 from this other page, 27 00:01:55,320 --> 00:01:58,920 so we want to grant access to our post route and our get route 28 00:01:58,920 --> 00:02:05,520 for example and we do so by going to app.js and by adding some extra headers. We can add these 29 00:02:05,520 --> 00:02:11,700 headers here before we reach our routes where we do send the response, simply with a middleware function 30 00:02:11,700 --> 00:02:17,850 here where we get the request, get the response and get this next function and there on the response, 31 00:02:17,880 --> 00:02:27,800 we want to add a couple of headers. The headers we need to add there are access-control-allow-origin, 32 00:02:27,920 --> 00:02:35,540 the value for that can be a star or the URL from what you want to allow access, 33 00:02:35,570 --> 00:02:41,480 so we could also specify localhost:3000 there but I'll add a star which means any other server 34 00:02:41,510 --> 00:02:43,430 can send me a request. 35 00:02:43,430 --> 00:02:49,370 We also should add another header here, allow methods, here we can restrict the HTTP methods we 36 00:02:49,370 --> 00:02:55,340 want to support and since I only have post and get routes which I want to expose to the public, we can 37 00:02:55,340 --> 00:02:57,710 write post, get here, 38 00:02:57,770 --> 00:03:03,080 so if you send me a put request you would still not be allowed access but these two methods are allowed 39 00:03:03,470 --> 00:03:10,390 and you can also add other headers to restrict the usage of your API, of your backend server here. Attached 40 00:03:10,390 --> 00:03:14,450 you find a link where you can learn more about CORS and which headers you can set there, 41 00:03:14,450 --> 00:03:20,720 these two are all the headers we need however. We thereafter should call next here so that the request 42 00:03:20,720 --> 00:03:26,790 is able to continue to our routes and with that we can save this and restart our backend server. 43 00:03:26,870 --> 00:03:28,700 Now back to the application, 44 00:03:28,910 --> 00:03:30,380 let's try this again. 45 00:03:30,410 --> 00:03:31,960 You don't even need to reload this page, 46 00:03:31,970 --> 00:03:39,420 we can just clear the error here to see if we get a new one, click find place again and still fail. The reason 47 00:03:39,420 --> 00:03:45,650 for that can be really tricky to understand but for post requests, browsers actually also send another 48 00:03:45,660 --> 00:03:47,070 request first 49 00:03:47,190 --> 00:03:50,490 where they try to find out whether the post request is allowed. 50 00:03:50,490 --> 00:03:53,130 You can see this in the network tab actually, 51 00:03:53,130 --> 00:03:57,420 here this add location request has a method of options. 52 00:03:57,600 --> 00:04:03,790 We never send an options request here in our code but the browser does this automatically for some HTTP 53 00:04:03,810 --> 00:04:07,100 methods, for example for post requests. 54 00:04:07,230 --> 00:04:13,710 So on the server side, we need to allow options requests as well by simply adding this to the allowed 55 00:04:13,710 --> 00:04:20,070 methods and now actually one more thing we should also do is add one extra header here and that's the 56 00:04:20,070 --> 00:04:27,720 access-control-allow-headers option where we defined which headers the client might 57 00:04:27,720 --> 00:04:30,560 send to us, which special headers and there 58 00:04:30,570 --> 00:04:36,000 I want to allow the content type header because we're setting this in the client side code as well. 59 00:04:36,180 --> 00:04:38,600 And now with that, we can restart the server, 60 00:04:40,060 --> 00:04:43,260 clear our errors here on the client, click find place again 61 00:04:43,390 --> 00:04:46,600 and now it works and we get back our success response there. 62 00:04:47,290 --> 00:04:52,180 So this is now how we can send a post request from a different server, from our client side server 63 00:04:52,210 --> 00:04:58,480 which has this static application, which has some client side Javascript running on it to our Node.js 64 00:04:58,490 --> 00:05:05,350 backend application which also uses Javascript but in the Node.js context and which now communicates 65 00:05:05,470 --> 00:05:11,410 as REST API with this client side project and that's quite a typical setup actually.