FirebaseAuth requests blocked by cors policy in js app - javascript

I know that similar questions exist, but I didn't find a solution for me.
I have a built-in Flutter web app that is compiled into javascript. I had it hosted on Firebase Hosting. The in-app first screen is the login page which uses FirebaseAuth for logging. Whenever the first time website is open - all internal library requests have status failed. When after that I press CTRL+F5 everything works smoothly.
Here is a comparison of the same first internal request. On left is successful one, on right one which fails due to "** has been blocked by CORS policy: Response to preflight request doesn't pass access control check: The value of the 'Access-Control-Allow-Credentials' header in the response is '' which must be 'true' when the request's credentials mode is 'include'."
I found out about the configuration of headers for Firebase Hosting, so I did it:
{
"hosting": {
"public": "",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [ {
"source": "**",
"headers": [
{
"key": "Access-Control-Allow-Origin",
"value": "*"
},
{
"key": "Access-Control-Allow-Methods",
"value": "DELETE, POST, GET, OPTIONS"
},
{
"key": "Access-Control-Allow-Headers",
"value": "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With"
}
]
}]
}
}
In app there is a simple initialization of a firebase in didChangeDependencies with required data. Then FirebaseAuth.instance.signInWithEmailAndPassword(...) On index.html section about firebase:
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.7.0/firebase-firestore.js"></script>
<script src="main.dart.js" type="application/javascript"></script>
I have tested it in Chrome many times and always failed. Only on localhost runs smoothly
More info:
requests on "normal" (without clearing cache) return to page:
requests after CTRL+F5 on the same site:
Those blurred on red are the URL of my app

The cause of this issue was from the service worker blocking Firebase Auth calls on web. This has been fixed as mentioned on this GitHub issue thread. Updating to the latest version of firebase_auth plugin should fix the issue.

Related

Loading project file on AWS S3 giving error 403: Forbidden

I have uploaded to AWS basic app where I am loading few assets. For some reason these models are throwing this error:
Error: fetch for “https:…/model1.glb” responded with 403: Forbidden
I have uploaded few test apps to AWS before without any issues. Bucket policy is setup and permissions are all public.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "PublicReadGetObject",
"Effect": "Allow",
"Principal": "*",
"Action": [
"s3:GetObject",
"s3:PutObject",
"s3:PutObjectAcl"
],
"Resource": "arn:aws:s3:::ts1/*"
}
]
}
Edit: the app was built with Vite and I am hosting dist folder
In my case the solution was putting the file into public folder. I am loading the asset now from this path './assets/models/plant1.glb'. For whatever reason that was the whole issue, works now on AWS and Firebase hosting.

Cors error occurs while getting object from s3

I am using Aws-sdk in my angular application.uploading and deleting files processes are working fine but when it comes to get file object from s3 bucket sometimes i get cors policy error . any solution to overcome this problem?
this is my bucket policy?
[
{
"AllowedHeaders": [
"*"
],
"AllowedMethods": [
"GET",
"PUT",
"POST",
"DELETE"
],
"AllowedOrigins": [
"*"
],
"ExposeHeaders": [
"Etag"
]
}
]
As I can see that the bucket policy looks fine. Try to fix this on the client-side I mean in the angular application.
Here is a good guide,
https://medium.com/weekly-webtips/do-you-know-how-to-resolve-cors-issues-in-angular-9d818474825f
I don't recommend using '*' in the s3 configuration.

CORS in Nextjs Application on Vercel

I am currently working wiht my first bigger NextJS application and I ran into the classic CORS problem.
I have a backend, which is hosted on a different server/url, I get my json data from this backend.
My frontend written in NextJS is deployed on Vercel.
I do know, that I have to enable CORS both on the backend side, as well as on the frontend side, in my localhost dev, everything is working fine (even fetching data from backend)
I already followed this guide: https://vercel.com/knowledge/how-to-enable-cors, to enable CORS in my NextJS Application. I modified the nextjs config:
module.exports = {
async headers() {
return [
{
source: "/.*",
headers: [
{ key: "Access-Control-Allow-Credentials", value: "true" },
{ key: "Access-Control-Allow-Origin", value: "*" },
{ key: "Access-Control-Allow-Methods", value: "GET,OPTIONS,PATCH,DELETE,POST,PUT" },
{ key: "Access-Control-Allow-Headers", value: "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version" },
]
}
]
}
};
However, when deploying the app on vercel, I receive the following error:
Access to fetch at 'https://<my-censored-backend-url>' from origin 'https://<my-frontend-url>.vercel.app' 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.
In my backend (written in rails), I already configured my frontend on vercel to be allowed for CORS.
Is there anything I am missing?
Do you guys have any experience in CORS and fetching data for NextJS from a different server?
I am using getStaticProps, getServerSideProps AND SWR for fetching.
Any help would be appreciated
I think NextJS has a weird issue that sometimes it just throws the CORS error randomly.
In my case, with a wrong URL it will throw this CORS error.
For example, I used "https://localhost:3000" and then it throws the CORS error. And it worked with "http://localhost:3000".
So my suggestion would be to double check the URL that you are using.
Also, be sure to not include a trailing slash like "http://localhost:3000/" may not work.

Amazon S3 javascript and css files 403

I have some javascript and css files linked in head tag of my page. All the page content (index.html page and javascript and css files) is located in a bucket. When I launch index.html page, I get 403 errors on all those javascript and css files:
Failed to load resource: the server responded with a status of 403 (Forbidden)
This must be some setting on amazon S3 which prevent these files from accessing?
Can you help me resolve this?
You need to check if your files are configured as public:
Or grant permissions using a Bucket policy:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AddPerm",
"Effect": "Allow",
"Principal": "*",
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
}
]
}

Publishing Amazon AWS credentials for account with 1 permission

I have an piece of code I want to live on a static website but I want it to pull the latest version of a file in an Amazon AWS S3 bucket to display a link for download. I'm not requiring the user to authenticate in any way with my site.
The API I'm using (aws-sdk for javascript) requires credentials to perform any operation, even on a public bucket. My plan for listing the files is to create an IAM user that can only access a subfolder in this bucket through the following policy to do what I need:
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AllowListingOfDLFolder",
"Action": "s3:ListBucket",
"Effect": "Allow",
"Resource": [
"arn:aws:s3:::cobstatic.com"
],
"Condition": {
"StringLike": {
"s3:prefix": [
"dl/*"
]
}
}
}
]
}
Is this secure? Is there a better solution?

Categories

Resources