AWS S3 Bucket CORS Policy Error: No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I am new to serverless services, mainly the aws concept. I am trying to deploy my Single Page Application (SPA) with AWS S3 Bucket and CloudFront. Every static files are served properly, but inside SPA, there are some axios.POST(...) out of origin page to my API. The Api is correctly configured, and accepts requests from whoever (tested).
Now when I try:

 curl -H "origin: ORIGIN_DOMAIN" -H "x-api-key: API_KEY" -v "API_URL"

The response is as predicted (200 OK with data)

But when I try to load my SPA, the browser says:

Access to XMLHttpRequest at 'https://47zb0mpexk.execute-api.eu-south-1.amazonaws.com/default/autostatistika' from origin 'http://d1b89hgibifv2r.cloudfront.net' 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.

My S3 bucket CORS policy:

<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

I found some stackoverflow questions, like this: Correct S3 + Cloudfront CORS Configuration? And did what exactly is in answer (and in aws documentation): https://stackoverflow.com/a/52383335/9156446

Please, Can someone help me how to figure it out? Thanks.

UPDATE: I've forgot to try SPA on local machine with settings from remote API and my app didn't work, even on local machine. After few hours I found, that my API is not responding with headers 'Access-Control-Allow-Origin' : '*' only within browser with axios.POST(). So the problem were in API, because it didn't properly responding with header 'Access-Control-Allow-Origin' (AWS Lambda + API Gateway) even if cURL command works. I solved it by hard coding header within response in AWS Lambda. Thx to @vaquar khan, for your time.

- https://aws.amazon.com/premiumsupport/knowledge-center/no-access-control-allow-origin-error/ — vaquar khan, Aug 31 '20 at 20:54
Thanks for replies, but i know, that the problem is somewhere in my S3 bucket config. But the problem should be in CORS policy settings(?) I've posted my S3 bucket CORS policy, but it's propably simplest CORS policy settings, so where is the problem? — Vojtech Mach, Aug 31 '20 at 21:50

score 3 · Answer 1 · answered Apr 05 '22 at 04:55

3

[
  {
    "AllowedHeaders": [
        "*"
    ],
    "AllowedMethods": [
        "POST",
        "GET",
        "PUT"
    ],
    "AllowedOrigins": [
        "*"
    ]
  }
]

In the new S3 console, the CORS configuration must be JSON.

answered Apr 05 '22 at 04:55

Avni

106
5

score 0 · Answer 2 · answered Aug 31 '20 at 21:48

You need to change configuration to allow public access using ACL and add following configuration

cors-configuration :

        <?xml version="1.0" encoding="UTF-8"?>
        <CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
        <CORSRule>
            <AllowedOrigin>http://www.myapp.com</AllowedOrigin>
            <AllowedMethod>GET</AllowedMethod>
            <AllowedMethod>POST</AllowedMethod>
            <AllowedMethod>PUT</AllowedMethod>
            <ExposeHeader>Accept-Ranges</ExposeHeader>
            <ExposeHeader>Content-Range</ExposeHeader>
            <ExposeHeader>Content-Encoding</ExposeHeader>
            <ExposeHeader>Content-Length</ExposeHeader>
            <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
            <AllowedHeader>*</AllowedHeader>
        </CORSRule>
        <CORSRule>
            <AllowedOrigin>https://www.app.com</AllowedOrigin>
            <AllowedMethod>GET</AllowedMethod>
            <AllowedMethod>POST</AllowedMethod>
            <AllowedMethod>PUT</AllowedMethod>
            <ExposeHeader>Accept-Ranges</ExposeHeader>
            <ExposeHeader>Content-Range</ExposeHeader>
            <ExposeHeader>Content-Encoding</ExposeHeader>
            <ExposeHeader>Content-Length</ExposeHeader>
            <ExposeHeader>Access-Control-Allow-Origin</ExposeHeader>
            <AllowedHeader>*</AllowedHeader>
        </CORSRule>
        </CORSConfiguration>

s3-web-policy:

        {
          "Version":"2012-10-17",
          "Statement":[
            {
              "Sid":"AddPerm",
              "Effect":"Allow",
              "Principal": "*",
              "Action":["s3:GetObject"],
              "Resource":["arn:aws:s3:::dynamic-xxx-xxx-bucket/*"]
            }
          ]
        }

Thanks for reply. I've tried your solution, but still have got same error. It looks like nothing changed. — Vojtech Mach, Aug 31 '20 at 22:01
Maybe one more thing, if you can spend a minute on. My API have common access key (x-api-key header required), which i send with axios.POST(url, params, headers). But as u mentioned: "*", so it should not be a problem? — Vojtech Mach, Sep 01 '20 at 12:23

AWS S3 Bucket CORS Policy Error: No 'Access-Control-Allow-Origin' header is present on the requested resource

2 Answers2