Cross-Origin Resource Sharing (CORS)is a mechanism that uses additional HTTP headers to allow user agents currently browsing a website to gain access to specific resources on other sources (domain) servers. When a user agent requests a resource that is not the current source of the document — for example, from a different domain, protocol, or port —Create a cross-origin HTTP request.
Take an example of a cross-origin request: http://domain-a.com HTML page inside a
<img> tag’s src attribute loaded from http://domain-b.com/image.jpg image. Many pages on the web today include resources such as CSS stylesheets, image images, and scripts from domains that are separate from their location, such as content delivery networks (content delivery networks, CDN). For security reasons, cross-origin HTTP requests made by code are restricted. For example, XMLHttpRequest and Fetch all follow the same-origin policy. This means that the API used by the web application can only request HTTP resources in the same domain as the application unless using CORS headers.
- AWS account
Open terminal and type the following code to download the files in this tutorial.
$ git clone https://github.com/ecloudvalley/AWS-S3-CORS.git
Create S3 Bucket and upload file
Now, we create two S3 Bucket to simulate the scenario, since S3 Bucket creation must be uniquely named, so in host two static web pages are different domains. Based on the same-origin policy, there are currently three behaviors between non-homogeneous sources that are restricted.
- Cookie、LocalStorage and IndexDB Unable to read
- DOM Unable to get.
- AJAX The request cannot be sent.
Although these limitations are necessary, there are times when they are inconvenient and reasonable use is compromised. One of the ways to circumvent these three limitations as described below.：CORS
- login to AWS console AWS console
At the top of the console, click Services -> S3
click Create bucket
- type Bucket name :
<YOUR-BUCKET-NAME>. In this tutorial we call it
Bucket-1> Bucket name must be unique
choose Region, in here we choose US East(N. Virginia) -> Create
after creation, click Bucket-1 we just creat, click Properties
choose Static website hosting, check Use this bucket to host a website
- index document type：
index.html, error document type：
- Back to
click Upload -> Add files -> Select files downloaded from this tutorial(load.html)
Next -> Manage public permissions choose Grant public read access to this object(s) -> Next -> Next -> Upload
now we back to Bucket-1 -> Prorperties -> Static website hosting. Because we are not storing index.html file in this Bucket, to load load.html need to add /load.html behind the URL.
You can see that the web page is displayed normally
Now we create another Bucket, remember that Bucket name must be unique, in this demo Bucket Name ：
<YOUR-BUCKET-NAME>, we call it
do the same thing as the
just only have to upload index.html error.html to
remember to choose “Grant public read access to this object(s)” if you forget, just back to the bucket, and select the file -> Actions -> Make public
Before Set S3 CORS
Now we check whether the website was successfully loaded all of the content before we set S3 CORS.
- At this point, we can see that the contents of
load.htmlwere not loaded successfully.
Bucket-2Host web page cannot be totally loaded because of the same-origin policy. Then we set CORS to the second Bucket that accepts cross-domain requests.
or right-click on the web page -> Inspect
Set S3 CORS
As already demonstrated earlier, CORS is blocked because of cross-domain requests, but there are times when we need to use cross-domain requests. For example, the web application itself is deployed in different development separation on server, front and rear end, etc.
- enter Bucket jonny-test-cors-media -> Permissions -> CORS configuration
copy the following code to CORS configuration -> Save
Refresh the page that just appeared with the error message. If the same error message still appears, clear the cache before refreshing
Successfully displayed the content of load.html in jonny-test-cors-media.
Just delete the two Bucket directly.
Now that you have learned how to set up CORS for S3 Bucket, you can configure CORS so that applications from different domains can access the resources within S3.