I am accessing a markdown file in S3 from a REST API call to AWS API gateway. I have CORS enabled on my endpoint resource and on my S3 bucket as follows:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>http://localhost:4200</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
I am still getting:
Access to XMLHttpRequest at 'https://xxxxx/page1.md' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I have the chrome Moesif CORS extension and everything works if its on. What else can I check?
BTW, whats weird is - everything works fine in FireFox - it appears to just be a chrome thing.
Chrome does not like localhost + CORS :)
Have a look at this SO answer.
Hope that resolves your question.
Related
My website is loading images from an S3 Bucket which has the following configuration:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
This S3 bucket is connected to CloudFront distribution which has the following cache/origin policies:
My website uses multiple domains, e.g. example1.com, example2.com, and it loads all the images perfectly. The problem begins when some libraries or SDKs try to access those images, I sometime, randomly, get cross origin error.
I think the problem is, that CloudFront caches the origin. So if a user tries to get image.jpg from example1.com, and then some other user tries to get image.jpg from example2.com, CloudFront cached origin example1.com to the request, and it will result in cross origin. To overcome this I'm using ?v=randomInt query param. This is bad practice though as I'm always getting a fresh copy of image.jpg and actually not using the cache.
Is there a way to NOT cache the origin headers, so both example1.com and example2.com can get image.jpg with their own origin? I tried removing the headers from the cache policy, but without any luck.
The error is as follows (after watermark.js tries to fetch the image with crossorigin="anonymous":
Access to image at 'https://cdn.treedis.com/tours/3453/tags/icons/8d2d0686-b3b9-4693-8167-0b652793c224.png' from origin example2.com has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource
Once I add ?v=1234 to the URL of the image, it works fine. So it must be the cache.
Since you've already included Origin in your cache key, I don't think you will encounter this problem any more. Just create an invalidation of path /*, and the problem will hopefully be resolved.
I have two S3 buckets. one is having image and pdf data (via CloudFront) and second is statically hosted on s3. when i call image from my URL then it was loaded, but when i call pdf it shows me following error :-->
"Access to fetch at 'pdf link' from origin 'url' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled".
To solve it i setup S3 CORS policy.
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
And i also setup cloudfront with whitelisting "access-control-request-headers", "access-control-request-method", "origin" these errors and choose GET, PUT, OPTIONS as well.
Suggest how i can solve this error?
Finally, i overcome from this problem. The main issue was the redirecting of protocol from "HTTP to HTTPS".
when i send the request from HTTP then CloudFront redirects it on HTTPS. By this redirection my image was loading but pdf was not, it was fails during redirection.
Then i change my CloudFront's viewer control protocol to HTTPs Only and now it works.
you can also set it to HTTP and HTTPS.
I have one site that uses HTTPS protocol and my images are load from amazon s3 bucket. my fabric js canvas uses that images. when I load the image into the canvas using https request. at that time it will throw an error of cross-origin.
I am using fabric js version 1.7.22
I use the Safari browser.
I try to setup cors configuration like Below :
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>https://example.com</AllowedOrigin>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
but this is not working in safari browser.
Please Help me. how to allow images of Amazon s3 to load in my canvas?
I am loading all my project's resources from a cdn with cors enabled, however html imports fail on the first page load (then succeed on loads after it).
link(rel="import" id="htmlImports" href=`components.html` async)
producing the following error:
s3 amazon No 'Access-Control-Allow-Origin' header is present on the requested resource.
I have search almost every related page and tried a million solution such as:
adding cors headers on the s3 bucket, some say that range solved their issue, some said that the expose header solved their issue, i added all and toggled between them, yet the same issue.
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>http://*</AllowedOrigin>
<AllowedOrigin>https://*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<ExposeHeader>ETAG</ExposeHeader>
<ExposeHeader>Accept-Ranges</ExposeHeader>
<ExposeHeader>Content-Range</ExposeHeader>
<ExposeHeader>Content-Encoding</ExposeHeader>
<ExposeHeader>Content-Length</ExposeHeader>
<ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
<AllowedHeader>range</AllowedHeader>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>
in the cors spec, it is said that duplicate cors header will cause the request to fail, so i made sure no duplicates are there.
preflight request is enabled on the server and contains all the required configurations (allowed headers etc).
Solution
The solution to my issue was to add crossorigin="anonymous" to the import link
link(rel="import", id="htmlImports", href=`components.html`,
async, crossorigin="anonymous")
by default s3 bucket sends a Access-Control-Allow-Credentials: true header, thus by adding crossorigin="anonymous"
Cross-origin CORS requests for the element will have the omit credentials flag set.
this will get the html import request to work everytime.
Note
if anyone has an alternative or can explain the behavior in details please do!
How can I set the S3 CORS AllowedOrigin configuration such that it dynamically echos the requesting domain in the Access-Control-Allow-Origin header?
In the post, "CORS with CloudFront, S3, and Multiple Domains", it is suggested that setting AllowedOrigin to <AllowedOrigin>*</AllowedOrigin> does this. However, S3 returns Access-Control-Allow-Origin: * instead.
Access-Control-Allow-Origin: * does not work in my case as I am using image.crossOrigin = "use-credentials" in a JavaScript app. With this option, S3 returns Access-Control-Allow-Credentials: true. Cross origin access to the image then fails because using wildcard as the allowed origin in conjunction with credentials is not permitted.
Background for why this is needed:
In my setup, access to images on S3 has to go through our domain, where authentication is required to restrict access and check if an account is authorized to access the images. If it is, the server returns a 302 redirect to an S3 URL.
For the authentication to work, image.crossOrigin = "use-credentials" has to be set so that the request hits my server with the required credentials. (Incidentally, when I tested on Firefox 30.0 and Chrome 35.0.1916.153, if crossOrigin is set to anonymous, credentials are still sent. But not on Safari 7.0.4. Consistent cross-browser behavior could only be obtained using use-credentials.).
Because browsers transparently redirects to the S3 URL, credentials are also sent.
AWS's CORS documentation does not document this, but I managed to get the answer in a thread on AWS Developer Forums, where I found that AWS changed the original behavior of echoing the requesting domain if * is being used for AllowedOrigin.
To get S3 to dynamically echo the requesting domain, AllowedOrigin has to be set as such:
<AllowedOrigin>http://*</AllowedOrigin>
<AllowedOrigin>https://*</AllowedOrigin>
For me it seemed to be some kind of caching issue (even though I was not using cloudfront, only S3). Appending a random parameter to the URL fixed the issue for me, e.g.
https://s3-amazon.com/bucket/file.jpg?d=3243253456346
I also had the following CORS settings in S3:
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>http://*</AllowedOrigin>
<AllowedOrigin>https://*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>