1

I am attempting to configure the CORS policy on my S3 bucket to allow it to properly communicate with snap.berkeley.edu. However, I received the following error after deploying to S3, which I did not receive when testing with localhost:

Access to XMLHttpRequest at 'https://cloud.snap.berkeley.edu/api/v1/init' from origin 'https://soundscope-website-beta.s3.amazonaws.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have since changed it to the following xml. However, doing so did not change the error message.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>https://snap.berkeley.edu</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>https://cloud.snap.berkeley.edu</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>PUT</AllowedMethod>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>DELETE</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

Am I properly configuring the CORS policy? Is this a problem on snap.berkeley.edu's end instead of my end on AWS? Any help/advice would be greatly appreciated.

Edit: After trying to use a proxy, I receive the following errors on localhost:

Access to XMLHttpRequest at 'https://cors-anywhere.herokuapp.com/https://cloud.snap.berkeley.edu/api/v1/init' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

POST https://cors-anywhere.herokuapp.com/https://cloud.snap.berkeley.edu/api/v1/init net::ERR_FAILED

and the following error from the s3 bucket:

Access to XMLHttpRequest at 'https://cors-anywhere.herokuapp.com/https://cloud.snap.berkeley.edu/api/v1/init' from origin 'https://soundscope-website-beta.s3.amazonaws.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
CleanCoder
  • 19
  • 3
  • Does this answer your question? [S3 - Access-Control-Allow-Origin Header](https://stackoverflow.com/questions/17533888/s3-access-control-allow-origin-header) – Mike Doe Mar 30 '20 at 06:31
  • The error message cited in the question indicates the problem is that the browser is blocking the frontend JavaScript code running at `https://soundscope-website-beta.s3.amazonaws.com` (your S3 bucket, I guess) from making a cross-origin request to `/api/v1/init`. But it seems you must have elided the actual request URL, because a request to "`/api/v1/init`" wouldn’t actually be a cross-origin request. What’s the actual full URL for "`/api/v1/init`"? – sideshowbarker Mar 30 '20 at 07:01
  • Configuring your S3 bucket with `https://snap.berkeley.edu` & `https://cloud.snap.berkeley.edu` as allowed origins doesn’t let your S3 bucket make requests to those origins. Instead, it’s the other way around: It allows frontend JavaScript code running at `https://snap.berkeley.edu` & `https://cloud.snap.berkeley.edu` to make requests to endpoints of your S3 bucket. Is that what you’re actually trying to enable? Or do you instead want to enable frontend JavaScript code running from your S3 bucket to make requests to `https://snap.berkeley.edu` and `https://cloud.snap.berkeley.edu` endpoints? – sideshowbarker Mar 30 '20 at 07:06
  • @sideshowbarker I didn't copy the full error message before for some reason; sorry about that. It's updated now. – CleanCoder Mar 30 '20 at 07:23
  • @sideshowbarker That makes sense. I'm trying the latter - to allow my frontend JS code to make requests there. It works perfectly on localhost, which led me to believe it was a problem with my CORS configuration on AWS. – CleanCoder Mar 30 '20 at 07:24
  • @emix thanks for the link; I tried adding the head tag and editing CloudFront, but, as sideshowbarker pointed out, the problem may not be with the CORS policy. – CleanCoder Mar 30 '20 at 07:33
  • So yeah then the problem seems to be that `https://cloud.snap.berkeley.edu/api/v1/init` isn’t CORS-enabled — it doesn’t send the Access-Control-Allow-Origin response header in its responses. So you’re not going to be able to make requests directly to endpoints there from frontend JavaScript code running in a browser. Instead you’ll either need to make the requests from your backend code, or else make the requests through a CORS proxy — for example, by changing the request URL in your frontend JavaScript code to `https://cors-anywhere.herokuapp.com/https://cloud.snap.berkeley.edu/api/v1/init` – sideshowbarker Mar 30 '20 at 07:44
  • For an explanation of what a CORS proxy does, see the *How to use a CORS proxy to get around “No Access-Control-Allow-Origin header” problems* section of the answer at https://stackoverflow.com/a/43881141/441757 – sideshowbarker Mar 30 '20 at 07:45
  • @sideshowbarker Thanks for the help; I tried using a proxy but, unfortunately, it didn't work (see edit). Is there a reason why my original code would work from localhost but not from my s3 bucket? – CleanCoder Mar 30 '20 at 21:03
  • Yeah, if your requests include credentials, then you don’t want to be sending the requests through a third-party proxy, even if the third-party proxy allowed. The error cited message in the question indicates that when you use CORS Anywhere, the browser is blocking your frontend code from accessing the response due the fact that CORS Anywhere is adding an `Access-Control-Allow-Origin: *` response header — but browsers don’t allow the `*` wildcard there when the request includes credentials. Really your only option here it so make the request from your own backend code instead. – sideshowbarker Mar 30 '20 at 23:37
  • I don’t know why your original code would work from localhost but not from your s3 bucket. – sideshowbarker Mar 30 '20 at 23:38
  • @sideshowbarker Thanks for the help; the problem was that the site I was accessing allowed CORS requests from localhost but not from my custom domain. I contacted the owners to have the domain added to the whitelist to solve the issue. – CleanCoder Apr 05 '20 at 23:51

1 Answers1

0

I had the same issue and the suggestions in the discussion unfortunately didn't help in my case, so I thought I add my solution here in case anybody else encounters this very frustrating issue.

I FINALLY got it working after editing the Metadata in the file's property tab in S3. Adding a "System defined" type, key: Cache-Control, value: no-store.

Joo
  • 36
  • 3