The preflight OPTIONS request for an AJAX GET from S3 using CORS fails with a 403 error

I have come across various discussions and issues related to this topic, but unfortunately, I have not been able to find a solution yet. I am attempting to use AJAX GET to retrieve a file from S3. My bucket is configured for CORS:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Below is a curl snippet for my request (file path omitted):

curl 'https://s3.amazonaws.com/mybucket/myfile.tar.gz
-X OPTIONS 

-H 'Access-Control-Request-Method: GET' 
-H 'Origin: http://0.0.0.0:9000' 
-H 'Referer: http://0.0.0.0:9000/' 
-H 'Access-Control-Request-Headers: accept, x-longtostring' 

-H 'Pragma: no-cache' 
-H 'Accept-Encoding: gzip, deflate, sdch' 
-H 'Accept-Language: en-US,en;q=0.8,he;q=0.6,mg;q=0.4' 
-H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_10_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.125 Safari/537.36' 
-H 'Accept: */*' 
-H 'Cache-Control: no-cache' 
-H 'Connection: keep-alive' 
--compressed 
--verbose

Unfortunately, I am receiving a 403 error:

 HTTP/1.1 403 Forbidden
 x-amz-request-id: 1F545B4ED302B3AD
 x-amz-id-2: AiQwUgOeVhfxRjYL/13MLBsUQdx8n4bYLhV3TwftDfnMZ+7FhvnxfVAGLCo3WCiT
 Content-Type: application/xml
 Transfer-Encoding: chunked
 Date: Sun, 30 Aug 2015 21:25:17 GMT
 Server AmazonS3 is not blacklisted
 Server: AmazonS3

<?xml version="1.0" encoding="UTF-8"?>
 Connection #0 to host s3.amazonaws.com left intact
<Error><Code>AccessForbidden</Code><Message>CORSResponse: This CORS request is not allowed. This is usually because the evalution of Origin, request method / Access-Control-Request-Method or Access-Control-Requet-Headers are not whitelisted by the resource's CORS spec.</Message><Method>GET</Method></Error>

The issue seems to be resolved when removing -X OPTIONS. However, this is automatically added by the browser (I'm using Angular $http.get), and I do not have control over it (or do I?).

Thank you

Answer №1

It appears that s3 is not allowing OPTIONS calls, regardless of the configuration I tried.

However, for GET requests, if you do not include any custom headers, the browser will not trigger an OPTIONS call.

Therefore, I removed all custom headers from the specific $http.get(s3FilePath) request.

The reason I received a 403 error was because the file was not yet ready. Once the file is ready, it can be accessed correctly.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular routes can cause object attributes to become undefined

I am new to Angular and struggling with an issue. Despite reading numerous similar questions and answers related to AJAX, async programming, my problem remains unsolved. When I click on the 'Details' button to view product details, the routing wo ...

Ways to restart a click event in jQuery from the start without any prior actions impacting it

Is it possible to repeat a function every time the anchor tag is clicked, displaying new results each time? For example, let's say we have 3 items: a = 0, b = 0, c = 1. When the anchor tags for a, b, and c are clicked, the console shows that a = 1, b ...

The web client successfully logs out, while the mobile client is experiencing difficulty with logging out

In my Node backend, I am using express/express-session/passport and here is the code for logging out: // GET /logout exports.logout = (req, res) => { req.logout(); if (req.body.type === "mobile") { return res.status(200).json({success: true}); ...

Refreshing Div Element with PHP AJAX POST请求

It's me again. I'm feeling really frustrated with this code, it's starting to get on my nerves. I don't mean to keep bothering you, but I finally figured out where the issue was in the code and now I just need a little help with the fin ...

Loop through items in a list using Angular.js and display each item within an <

I am facing an issue where the model returned from the server contains html tags instead of plain text, such as b tag or i tag. When I use ng-repeat to create a list based on this model, the html is displayed as pure text. Is there a filter or directive av ...

Sending chosen choice to controller method

I'm working with a table that contains inputs and angular models. <td> <select class="form-control" id=""> <option ng-model="mfrNo" ng-repe ...

The location.reload function keeps reloading repeatedly. It should only reload once when clicked

Is there a way to reload a specific div container without using ajax when the client requests it? I attempted to refresh the page with the following code: $('li.status-item a').click(function() { window.location.href=window.location.href; ...

Leveraging AWS S3 and Next.js getStaticProps with UTF8 format

While utilizing getStaticProps to fetch posts from my Wordpress CMS using the example provided at https://github.com/vercel/next.js/tree/canary/examples/cms-wordpress, I encountered UTF-8 errors only when I uploaded the files to Amazon S3. This issue seems ...

In my Angular application, I have two div elements that I want to toggle between. When a button located in the first div is clicked, I need

I am working on a code snippet that requires me to hide div1 and display div2 when the button in div1 is clicked using Angular HTML5. Currently, I have two separate modal pop up template files and JS controllers for each of them. Instead of having two po ...

The CSS for the UI Grid is malfunctioning

I have been working on creating a grid using UI Grid (recent version of ngGrid) within my current project. However, I am facing some issues with the display. The icons like angle down and row selected icon are not showing up correctly when I include the CS ...

When using PHP's `header('Location: /xyz/')` function, instead of redirecting to the 'xyz/' page, it displays HTML code

Utilizing ajax, I am inserting data into the database. If the insertion is successful, I wish to redirect to a different page. Below is the code snippet: if (DB::insertRegistrationUser($email, $password, $subscribe)) { header('Locati ...

What is the process for utilizing ajax+jquery to send multiple files to a server?

Incorporating pure PHP and HTML, I have successfully been able to upload multiple files using the following code: <form action="upload.php" enctype="multipart/form-data" method="post"> <input type="file" name="raw[]" id ="raw" multiple> <i ...

Open the HTML page from a separate directory

I'm facing an issue with loading additional HTML onto a page in my project when a link is clicked. The HTML fragment file I want to load is stored in a different folder within the project structure. Despite my efforts, I keep encountering a 404 error ...

Validation for required fields in an Angular form causes empty fields to be cut off in the resulting JSON data

I have implemented AngularJS form validation by using the "required" attribute in certain input elements within a form, such as ng-model. While this method is effective, I have noticed that fields not marked as required end up with empty values. For examp ...

Verify the Existence of Date and Time Range in SQL SERVER

I am dealing with the following set of data ID empID FromDate ToDate FromTime ToTime 1 00001 09/11/2018 09/11/2018 10:00 AM 11:00 AM 2 00001 09/11/2018 09/11/2018 08:00 AM 09:00 AM 3 00001 09/11/2018 09/11/ ...

What is the best way to establish a default selection in Angular?

After retrieving JSON data from the server, it looks something like this: $scope.StateList = {"States": [ { "Id": 1, "Code": "AL", "Name": "Alabama" }, { "Id": 2, "Code": "AK", "Name": "Alask ...

Protractor - selecting a hyperlink from a list

Imagine you have a todo application with tasks listed as follows: Walk the dog, Eat lunch, Go shopping. Each task has an associated 'complete' link. If you are using Protractor, how can you click on the 'complete' link for the second t ...

Problem with Safari: File downloaded with name "Unknown" due to Javascript issue

After successfully converting my data to text/csv, I can easily download the file in Chrome. However, when attempting to do so in Safari on an iPad or Mac, it opens a tab with the name "unknown" or "Untitled". The code snippet I am using for this is as fol ...

AngularJS fails to display JSON data

I've been experimenting with AngularJS by creating a basic gallery that pulls images from a JSON file, but for some reason I'm having trouble displaying the data. index.html: <!DOCTYPE html> <html ng-app="portfolioApp"> <head> ...

Sending simple form information through AJAX to a PHP web service

Attempting to send form data via jQuery and Ajax to a PHP web service (php file) for echoing the results. This is my index.html file <html> <head> <title>PHP web service &amp; AJAX</title> <link rel="stylesheet" type="text/ ...