Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

I have an issue with cors access control allow origin error messages.

My understanding is that the cors headers need to be configured in the lambda headers, and I have done that as below in the handler.ts file:

headers: {
        "Content-Security-Policy": "default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline';",
        "Access-Control-Allow-Origin": "*", // Allow any origin to access the API
        "Access-Control-Allow-Headers": "Content-Type",
        "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS",
        "Content-Type": "text/html",
      },

I set the most open CSP I could find to help rule out this as an issue.

Ive also attached a cors policy to the apig in case that was an issue, and that also has not helped:

ions:
  serve:
    # Any web request regardless of path or method will be handled by a single Lambda function
    handler: handler.serve
    events:
      - http:
          path: /
          method: any
          cors:
            origin: '*'
            headers:
              - Content-Type
              - Access-Control-Allow-Orign
            allowCredentials: true
      - http:
          path: /{any+}
          method: any
          cors:
            origin: '*'
            headers:
              - Content-Type
              - Access-Control-Allow-Orign
            allowCredentials: true

I have set the allow * against the buckets cors configuration:

DistBucket:
      Type: AWS::S3::Bucket
      DeletionPolicy: Delete
      Properties:
        CorsConfiguration:
          CorsRules:
            - AllowedHeaders:
                - "*"
              AllowedMethods:
                - "GET"
              AllowedOrigins:
                - "*"
                - Fn::Join:
                    - ""
                    - - https://
                      - Ref: ApiGatewayRestApi
                      - .execute-api.
                      - Ref: AWS::Region
                      - .amazonaws.com
              MaxAge: 3000

I have tried all kinds of configurations, but I seem to be missing something here, I cant see what. I am getting a handful of error messages on the browser console about Access-Control-Allow-Origin cors header missing.

However, if I curl the address I can see there is the header present. I dont get it?

curl -i https://my.monitoring.hamer.cloud/
HTTP/2 200 
content-type: text/html
content-length: 1956
date: Sat, 18 Feb 2023 04:06:50 GMT
x-amzn-requestid: 4283dc69-a91e-4e51-902e-b09fee0dd3ed
access-control-allow-origin: *
access-control-allow-headers: Content-Type
content-security-policy: default-src * 'unsafe-inline' 'unsafe-eval'; script-src * 'unsafe-inline' 'unsafe-eval'; connect-src * 'unsafe-inline'; img-src * data: blob: 'unsafe-inline'; frame-src *; style-src * 'unsafe-inline';
x-amz-apigw-id: AhFCKEC_ywMFfjw=
access-control-allow-methods: GET, POST, PUT, DELETE
x-amzn-trace-id: Root=1-63f04eda-5f847a8175ea63257295e739
x-cache: Miss from cloudfront
via: 1.1 fd2442d18add87f1fea3351cec311828.cloudfront.net (CloudFront)
x-amz-cf-pop: SYD1-C1
x-amz-cf-id: XUTu_uCqYZ9caCszjnf1FBIkHNNIlG94mSaMzgQZ4jT4AomSBWmUbg==

<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="utf-8" />
      <meta name="viewport" content="minimum-scale=1, initial-scale=1, width=device-width" />
      <meta name="theme-color" content="#00FF00" />
      <title>Monitoring Service</title>
      <link rel="manifest" href="https://s3-ap-southeast-2.amazonaws.com/web-production-distbucket-1g232unkhiktf/manifest.json" />
      <link rel="shortcut icon" href="https://s3-ap-southeast-2.amazonaws.com/web-production-distbucket-1g232unkhiktf/favicon.ico" />
      <link rel="stylesheet" href="https://s3-ap-southeast-2.amazonaws.com/web-production-distbucket-1g232unkhiktf/main.4a854c81.css" />
      <style id="jss-server-side"></style>
      <script id="config-server-side">
        window.__CONFIG__ = {"app":{"TITLE":"Monitoring Service","THEME_COLOR":"#00FF00","URL":"https://sy0udottn3.execute-api.ap-southeast-2.amazonaws.com/production","DIST_URL":"https://s3-ap-southeast-2.amazonaws.com/web-production-distbucket-1g232unkhiktf","PUBLIC_URL":"https://s3-ap-southeast-2.amazonaws.com/web-production-distbucket-1g232unkhiktf"}};
      </script>
    </head>
    <body>
      <div id="root"><div class="App"><header class="App-header"><h1 class="App-title">Welcome to <!-- -->Monitoring Service</h1></header><p class="App-intro">To get started, edit <code>src/App.tsx</code> and save to reload.</p></div></div>
      <script src="https://s3-ap-southeast-2.amazonaws.com/web-production-distbucket-1g232unkhiktf/main.19ce0928.js" crossorigin></script>
<script src="https://s3-ap-southeast-2.amazonaws.com/web-production-distbucket-1g232unkhiktf/runtime.3553f038.js" crossorigin></script>
<script src="https://s3-ap-southeast-2.amazonaws.com/web-production-distbucket-1g232unkhiktf/vendor.ae97a551.js" crossorigin></script>
<script src="https://s3-ap-southeast-2.amazonaws.com/web-production-distbucket-1g232unkhiktf/components.bc92458d.js" crossorigin></script>
    </body>
  </html>

arabold / serverless-react-boilerplate

Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200. #52