ReactS3Client library 403 forbidden error on post to S3 bucket - reactjs

I am using the ReactS3Client and I am having issues with uploading to a bucket. I have all the config files ready. I am using a 3rd party library that allows a user to upload media to a designated cloud server, that being S3. Everything works good on iOS side for the configuration and I am able to upload accordingly. For that, I am using AmplifyCLI.
The error I am getting is: POST BUCKETURL 403 (Forbidden)
On the S3 side, I configured the following -- S3 bucket policy config
I know the error stems from the S3 CORS policy. Ive tried making the bucket public and editing the policy to allow all sorts of requests, but I'm still receiving the 403 forbidden error.
Any help would be really appreciated.

Related

Google App engine standard environment /_ah/upload/ is failing with HTTP 503

Our production App engine standard environment Java 8 application is facing error when uploading files. This used to work until yesterday but started seeing HTTP 503 error in response to https://.appspot.com/_ah/upload/<upload_key>
Is there any service down specific to _ah/upload ??
Our file upload process.
String uploadUrl = com.google.appengine.api.blobstore.BlobstoreServiceFactory.getBlobstoreService().createUploadUrl(uploadCallBackUrl); // returns an upload url of the form https://.appspot.com/_ah/upload/AMmfu6aRaNw4HRDt9eS1d6crhKjxyEZ6aPCUrBE-0O8MftAY5BMzRw3kZkkCsqq5MJLDBfhWdZlVTKdfKuxBuD3QZDgZsRbUlx6QTD-B6MbJfTslohO7vcbBQet2I3kVUC4qAPwDSMHuI3lW6fvfbdehpz1pLYA88vlepiWgpHYEXtG8tqx5_MI/ALBNUaYAAAAAYEHvj10qLujApjnqp16MCEdnZecmQh1F/
File upload from browser to the url returned in step#1
I know we are using blobstore api, but this is legacy application which used to successfully upload files until yesterday.
Any help in this regard is highly appreciated.
Update Moments later the service is working normally again. This must be a blip internal to GCP.
Best thing to do is to check if Google set a deprecation date for usig Blobstore API and whether that date has been reached.

Using aws s3 and cloudfront to host React application.Can anyone suggest configuration to access dynamic urls?

For e.g. website url is https://www.myreactapp.com. It has some other pages with dynamic get parameters.
https://www.myreactapp.com/category/1
https://www.myreactapp.com/category/2
It's giving me Access Denied error
I had the same issue where i'm trying to access content at run time using ajax.
Set S3 bucket Access as "Objects can be public", No need to set "Public" Access for Static website hosting.
Use S3 Origin if you want CloudFront to deliver any objects that place in S3 bucket. But if you generate run time content, its batter to use Custom Origin.
For Custom Origin keep Note: https://docs.aws.amazon.com/general/latest/gr/s3.html#s3_website_region_endpoints
https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/DownloadDistS3AndCustomOrigins.html
The solution for the OP was to update the origin from S3 to Custom Origin domain. This allowed expected behaviour to work.
Validated that bucket was public, error 403 was caused by key not existing.

React router links in app broken after move to cloudfront + SSL

I have a react app, using react-router hosted in an S3 bucket, using Route53 as a DNS provider. The app worked fine with the Route53 config pointing to the S3 bucket.
Since I want to use SSL, I created a Cloudfront distribution pointing to the bucket, with an SSL cert., and pointed the DNS to it. Since doing that, none of the links work, (example.com works, but example.com/foo does not). It just returns a NoSuchKey error. I know that this is incorrect, as the key is definitely there, and it was working before.
Problems
Like most web-servers, CloudFront/S3 will throw a 404 if the bucket doesn't contain the object specified by the URL.
Unknown/unidentified objects will automatically throw a 403 if they are not publicly accessible, or don't have the right permissions
Solution
You can have CloudFront return an object to the viewer (for example, an HTML file) when your Amazon S3 or custom origin returns an HTTP 4xx or 5xx status code to CloudFront. You can also specify how long an error response from your origin or a custom error page is cached in CloudFront edge caches.
More resources
How CloudFront Processes and Caches HTTP 4xx and 5xx Status Codes from Your Origin
Creating a Custom Error Page for Specific HTTP Status Codes
How can I troubleshoot the HTTP 404 error "NoSuchKey" from Amazon S3?
CloudFront: Custom Error Pages and Error Caching

docker hub api giving No 'Access-Control-Allow-Origin' error

I'm trying to fetch the list of official images from docker hub using v2 api. If I try to do curl or use postman, I get the response correctly, but when I try to fetch the list using angularjs service, I get the following error
XMLHttpRequest cannot load https://hub.docker.com/v2/repositories/library/?page=8&page_size=15. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://run.plnkr.co' is therefore not allowed access.
Can someone suggest solution for this. How can I enable cors for this?
CORS could be enabled on the server side, and this is not your case. What you could do is :
1) use a proxy, for instance NGNIX, and make Sure that all request Made to localhost/whatever are redirected to hub.docker.com . This way you can "cheat" Cross-origin block
2) if you need a temporary and dirty solution you could more simply install chrome/safari plugins to bypass CORS security check
There is only one way to bypass CORS is send request through a cors proxy like http://crossorigin.me
It's an opensource project and you can build your own proxy server by download the full source code from here: https://github.com/technoboy10/crossorigin.me
Reason behind the issue :
As per my understanding you are doing an AJAX call to a different domain than your page is on. So, the browser is blocking it for security reasons as it usually allows a request in the same origin.A tutorial about how to achieve that is using CORS.
When you are using curl or postman they are not restricted by this policy. Quoted from Cross-Origin XMLHttpRequest:
Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.

Didn't pass options request when I use angular directly upload files to s3

I am doing an angular app to upload file directly to s3 storage. The app seems work only with one issue:
When it start to upload, it will send a request with options method first, and it will fail with error as below:
In Chrome: OPTIONS https://{my-domain}.s3.amazonaws.com/ net::ERR_INSECURE_RESPONSE
In Firefox: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://{my-domain}.s3.amazonaws.com/. This can be fixed by moving the resource to the same domain or enabling CORS.
However, when I try visit in browser with https://{my-domain}.s3.amazonaws.com, it will say connection untrust, and if I choose add exception, everythings goes very well.
So, I guess it is to do with the SSL certificate which is for s3.amazonaws.com not for {my-domain}.s3.amazonaws.com. It should not because CORS, otherwise later it should still be problem.
How can I fix it? Need another SSL?
Thanks,
Ron
After days efforts, finally found out it is because I got a dot "." in the bucket name, check this for more details: Amazon S3 - HTTPS/SSL - Is it possible?

Resources