Develop Reference

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.

Firefox error: NetworkError when attempting to fetch resource only from extension

I'm currently developing an extension for firefox/chrome that requires fetching some data from another website.
The extension seems to work fine from Chrome, however, I'm getting "NetworkError when attempting to fetch resource" when trying the extension from firefox.
If I execute the code from the console, it works just fine, the issue is only from the extension.
CORS is enabled on the server, any idea of what the source of the problem can be?
Serverside relevant code:
router.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
if (req.headers.authorization !== '***') {
return res.status(403).json({ error: 'Unauthorized request' });
}
next();
});
Clientside relevant code:
fetch('https://host:port/api/somepath', {
headers: new Headers({
Authorization: '*****',
}),
})
.then(....
Firefox error:
Error: TypeError: NetworkError when attempting to fetch resource
Extension manifest permissions:
"permissions": ["storage", "activeTab", "declarativeContent","webRequest", "webRequestBlocking", "webNavigation"],

The "<all_urls>" permission gives you access to every website someone goes to which is overkill. All you need to add for Firefox is the URL you are trying to call in the fetch (e.g., "https://host:port/api/somepath" in your example)
Resulting Extension manifest permissions:
"permissions": [
"storage",
"activeTab",
"declarativeContent",
"webRequest",
"webRequestBlocking",
"webNavigation",
"https://host:port/api/somepath"
],

Found the problem, I was missing 1 permission in the extension manifest, adding:
"<all_urls>"
to the array of permissions fixed the issue =)

FirebaseAuth requests blocked by cors policy in js app

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.

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/*"
}
]
}

How to resolve 'Cross Origin domain' issue without using 'CORS' chrome extension using Javascript to access JIRA REST API

I've developed an application to access JIRA REST API. By adding 'CORS' chrome extension, I'm able to get the data from http://localhost:8000 by enabling 'CORS'
But the application doesn't work without CORS extension.
Can someone please let me know is there a way to access the REST API without 'CORS' extension.

For me it worked by doing following steps:
add a property in manifest.json
"permissions": [
"activeTab",
"tabs",
"notifications",
"http://*/",
"https://*/"
]
and try to request the rest API using jquery
var settings = {
"async": true,
"crossDomain": true,
"url": "your jira server URL",
"method": "GET",
"headers": {
"authorization": "Basic <base64 username:password>",
"cache-control": "no-cache"
}
}
$.ajax(settings).done(function (response) {
console.log(response);
});