Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200. #52
Description
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>