Enabling CORS on an S3 Bucket in AWS (The Hands-on Demo) | Amazon Web Services Tutorial
ฝัง
- เผยแพร่เมื่อ 1 ส.ค. 2024
- In a previous video ( • CORS and S3 Simply Exp... ) we saw the theory behind cross-origin resource sharing (CORS) and how it works with Amazon S3 buckets. In this video, we put that theory into action in the AWS Console.
In a hands-on demo, we’ll create two S3 buckets (enabling static website hosting and opening up public access). Then we upload two HTML files to the origin bucket, showing that it works. Next, we split the HTML files across the two buckets (one in the origin bucket and one in the cross-domain bucket) and see that we get a CORS error. “Fetch blocked by CORS policy.” “No Access-Control-Allow-Origin header is present.” Doh!
To fix the error, we enable CORS on the cross-origin bucket, allowing GET method requests from the origin bucket.
The code from the demo can be found here: docs.google.com/document/d/1w....
🌟🌟If you’re interested in getting AWS certifications, check out these full courses. They include lots of hands-on demos, quizzes and full practice exams. Use FRIENDS10 for a 10% discount!
- AWS Certified Cloud Practitioner: academy.zerotomastery.io/a/af...
- AWS Certified Solutions Architect Associate: academy.zerotomastery.io/a/af...
00:00 - Overviewing the two buckets (origin and cross-origin) and HTML pages we’ll be creating
00:38 - Creating the origin bucket in S3 to host a static website
02:29 - Creating the cross-origin bucket in S3 to host a static website
03:49 - Uploading the HTML files to the origin bucket
05:32 - Moving one HTML page to the cross-origin bucket
07:42 - CORS error! Fetch blocked by CORS policy. No Access-Control-Allow-Origin header is present
09:00 - Fixing the CORS error by enabling CORS on the cross-origin bucket, JSON policy
10:17 - Testing our CORS changes - วิทยาศาสตร์และเทคโนโลยี
CORS demystified in a very simpler manner. Excellent and thanks a ton. Saved my day!
Yay!! I'm so glad it helped. Thanks for watching, and for the nice comment! 🙏🌟🤓
The patience to explain the content is really something impressive. Thank you and congratulations!
Much appreciated! Thank you too!! 🙏🌟😊
Awesome. I loved the way of explaining. Simple and straight to the point. It worked for me, thank you very much!
Yay! I'm so glad! Thanks for the nice comment! 😊
Amazing!!!! Many many thanks. I've tried almost everything and this is the only tutorial it worked.
Great to hear! I love it when stuff works. 🤓 Thanks for watching! 🙏🌟
this is the best video for CORS I've seen
Oh, I'm so glad! Thanks for watching! 😊
Wow! So simply explained. Thankyou so much 💕
My pleasure! 😊
Brilliant! Superb instructions and video. Thank you so much.
You're very welcome! Glad it helped! :)
Nicely explained - great video. Thank you so much!
You bet! Thanks for watching! 🙏🌟🤓
Great content. Learnt alot!
Glad it was helpful! Thanks for watching! 🔥💪🤓
Simple and straignt to the point, really helped.🙆🏻
I'm so glad!! Thanks for watching! 🙏🤓🌟
This was very helpful, thank you!
I'm so glad! Thanks for watching! 😊
Great explanation mam
Glad you liked it! Thanks for watching! 🙏🤓🌟
This video is helpful because of the content in the video but also relaxing because your voice makes it like ASMR lol
in my case, my "fetchedcontent" is an aws ec2 instance url/api
Awwww, you're too kind, Justin! Thanks so much! 🙏🤓🌟
Thanks for sharing
You bet! Thank YOU for watching!! 🙏🌟🤓
Hi , I am using aws free tier account for study purpose . I have explored s3 bucket created some buckets and IAM services other than that I have visited Ec2 dashboard , but haven't created any instance. Now I am planning to close my aws account and I deleted all my buckets and IAM users. After that I refered one of your video for deleting resources,so in tag editor when I search for s3 resources in all region , it shows no resources and for Ec2 it shows no resources found. But when I choose all regions and resource type as All supported resource type in tag editor, it displays things like DHCP option sets, Internet gateway , Network Acl , route table, subnets , vpc , security group for Ec2 service in multiple regions. Im very worried about getting billed for these. Do I have to delete them all before closing my account. 2) another question before using tag editor my billing dashboard shows 2 active resources because of s3 bucket I think , but after using tag editor it is showing 8 active resources from 16 regions , is that related to tag editor.
Next question : Is there any way to get support from aws regarding my active resources , or get conformation from them before closing my account .
Thank you in advance. Hope you help me.
Hi again dazzling! I responded to your comment on the "Find and Delete all AWS Resources" video: th-cam.com/video/8BwDrzeHOks/w-d-xo.html. Hope it helps! :)
This is great - I'm playing around trying to create a simple display of my bucket content on an HTML page using a javascript call, and have been running into this CORS error. I'm going to see if I can fix it.
Also a suggestion - do you think making a simple web interface to upload, delete and list files in a specific bucket would be a good Hands On tutorial subject, or would that be too complex?
Thank you for this!!
Ooh, I think that's a great suggestion, actually. Very real-world! I've added it to my list for future videos. Thanks for watching, and for the suggestion! 😊
Your videos are amazing! So glad I have found you! How is this different from using s?
I'm so glad you found me too! Thanks for watching! 😊
innerHTML is used to set the contents of a div to a string of HTML (which we get back from the fetch call). Where iFrame tells your browser to load a different URL inside the page. The end result might seem similar for both, but they're actually pretty different. With an inFrame, you can get scroll bars around it, depending on what's being displayed. And iFrames are generally discouraged due to issues with security, SEO and usability.
Hope that helps!
@@TinyTechnicalTutorials what I like about using the iFrame is that the other page is kept separate so I can run it independently.
Your videos are amazing.. Can you make a new video on scope of Cloud and devops engineer in 2024
Thanks for the nice comment!! 🤓🌟🙏 And I'll add this to my list of topics for future videos!
Nice video!! Could you pls cover Step Functions, SQS, SNS and DynamoDB services, if possible. Thanks
Thanks so much, dib! I'm actually working on the AWS Solutions Architect Associate course right now, and cover all of that. But I'll also add these to my list for shorter videos here on TH-cam. And I'll loop back here with a link once the course is ready, in case you're interested (no pressure!). Thanks for watching! :)
Hey again dib! If you didn't already see it, here's a short DynamoDB video that published this morning: th-cam.com/video/FQrN5aJWa_U/w-d-xo.html. Enjoy! :)
@@TinyTechnicalTutorials Will the course cover all the services via console or you are planning to make it more like a project covering different services using some Infrastructure as a Code technology(CloudFormation, Terraform etc.)?
Hey dib - The Solutions Architect course has short lessons/demos (in the Console) on TONS of services/tools/concepts (see Page 11 of the exam guide: d1.awsstatic.com/training-and-certification/docs-sa-assoc/AWS-Certified-Solutions-Architect-Associate_Exam-Guide.pdf). Because there are so many, it's hard to build an all-encompassing application, so for the most part, all the lessons are standalone and built from scratch (this also makes it easier to skip around in the course rather than having a bunch of dependencies that require watching from beginning to end). I DO cover CloudFormation concepts and do a short demo, but it's not used for building the infrastructure used throughout the course. Hope that helps!
Hey dib - If you haven't already seen it, I published a "basics" video for SQS this morning: th-cam.com/video/MH01PNZLR98/w-d-xo.html. Enjoy! :)
hi very nice video can you make another video how to ENABLING amazon grafana CORS.
Thanks for watching! 🙏🤓🌟 I'll add this one to my list for new videos!
"You need to acknowledge that you know what you're doing."
Errr I'm watching this video to learn how to do it...?
Ha! Good point! 😊
@@TinyTechnicalTutorials Hi there! Thank you for your response! I've been stuck on CORS policies for hours 😪 All I want to do is to get an image from S3 and put it on a javascript canvas, but I can't figure out how! Any tips?
Ugh...sorry to hear this! CORS can be frustrating for sure. Here are a couple links that might help?
repost.aws/knowledge-center/s3-configure-cors
www.hacksoft.io/blog/handle-images-cors-error-in-chrome
@@TinyTechnicalTutorials Thank you for these! I ended up using CloudFront (makes things so fast!) but now am getting 403 permission error lol