Unable to complete CORS request in Safari following a 302 redirect

Encountering an issue with how Safari handles CORS requests. Here's the scenario:

  1. DomainA hosts a page that sends a XHR request to DomainB (origin header set to DomainA)
  2. DomainB responds with a 302 redirect to DomainC (origin header set to null, compliant with RFC)
  3. DomainC returns a 200 response with actual content

This setup works smoothly in Chrome and Firefox, but encounters a failure on Safari.

Without xhr.withCredentials turned on, Safari initiates an OPTIONS preflight request before the actual request to DomainC, which seems unnecessary for simple requests. However, the problem arises after this preflight request when Safari throws an error stating "Cannot make any request from null."

To work around this issue, I can set Access-Control-Allow-Origin to * and omit the Access-Control-Allow-Credentials header, allowing the scenario to function. Nevertheless, this workaround does not align with expected behavior.

Despite having all CORS headers properly configured, setting xhr.withCredentials to true triggers the "Cannot make any request from null" error again, even when attempting wildcarding Access-Control-Allow-Credentials.

Although I believe all CORS headers are correctly set up, feel free to verify me. You can test the example here:

The question remains, is this a bug or am I overlooking something?

Appreciate your insights

Answer №1

I encountered the same issue and came across this bug report dating back to 2012 which seems to address it. After running the test code mentioned in the bug on FF / Chrome / Safari, failures were only observed in Safari. It appears that the bug is still unresolved.

To work around this issue, I made adjustments to our HTTP API by introducing an optional query parameter that triggers a different response. This response includes a 200 OK status with a JSON body containing the URL for the client to follow. Unfortunately, if you are using someone else's HTTP API, this solution may not be applicable.

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

How can you establish a default value on a paper select in Polymer?

I have a paper-select element that I want to customize with a default value when the page loads or after a specific event occurs. <dom-module id="custom-paper-select"> <template> <paper-select id="select-input-1" multiple ...

Update the iScrollView content once Knockout.js foreach loop has been executed

In the process of developing a web app with jQuery Mobile, Knockout.js, and iScrollView. Utilizing Knockout.js foreach to populate a list when an ajax request returns a JSON object that is pushed into an observable array, updating the page accordingly. Lo ...

This phrase cannot be invoked

My code seems correct for functionality, but I am encountering an error in my component that I do not know how to resolve. Can someone please help me with this issue? This expression is not callable. Not all constituents of type 'string | ((sectionNa ...

When the HTML and PHP code keeps running, the JavaScript text on the page updates itself

I was experimenting with threading in different languages like Java, PHP, and JavaScript. I am aware that JavaScript is single-threaded and PHP lacks robust threading capabilities. Below is the code snippet I have been working on: <body> <p id= ...

Issue with Ajax call in WordPress not functioning via a plugin

Having trouble with my Ajax calls. The first one works fine, but when it sends data to send_data.php, I encounter issues running Wordpress functions. After the data is sent to send_data.php, attempting to run a Wordpress function like add_post_meta(2, &ap ...

Update the source of the iframe

Consider this scenario: I have a link in index.html, like so: <a href="message.html">Go to message page</a> Then, in another page called iframe.html, there is an iframe: <iframe id="iframe" src="profile.html" frameborder="0" scrolling="no ...

What is the correct way to test setInterval() statements within Angular?

Here is a simple code snippet I am working on: public async authenticate(username: string, password: string) { const authenticationResponse = await this.dataProvider.authenticate(username, password); if (authenticationResponse.result.code == 0) { ...

Adding a new row to an HTML table using JavaScript

In the code snippet below, I am facing an issue with adding a row to an HTML table and inserting it into a database. I have tried using JavaScript to add the row in order to avoid postback, but so far, I have been unsuccessful. Can someone assist me in t ...

Encountering an error stating "Potential null object" while attempting to retrieve the total count of characters and numbers in a given string

Currently, I am trying to find the number of characters and digits that repeat more than once in a given input string. For example, if the input is "zzrrcde", the output should be 2 as both z and r occur more than once. Here is the function I have writte ...

Aligning a pair of MDC drawers

I am facing a challenge on my webpage where I have implemented two Material Design Component drawers with identical items. One is set to be permanent for desktop and tablet displays, while the other is designed to be hidden or modal for mobile devices. &l ...

Having trouble getting the HTML5 Video to play using the AngularJS ng-src tag?

There seems to be an issue with AngularJS ng-src not working properly with the HTML5 Video element in this specific fiddle: http://jsfiddle.net/FsHah/5/ Upon inspecting the video element, it appears that the src tag is correctly filled with the appropriat ...

Tips on waiting for all pages to fully load before obtaining elements from them?

<div id="validationPages"> <div id="page1Div"></div> <div id="page2Div"></div> <div id="page3Div"></div> <div id="page4Div"></div> </div> <script type="text/javascript"> ...

Issue: The THREE.GLTFLoader cannot process this asset. Only glTF versions below 2.0 are compatible

Upon utilizing three.js, I encountered an error while parsing data from the GLTF JSON file. This file was exported from the three.js 3D viewer and editor, indicating a version of 4.5 in the JSON content. Highlighted below is the JSX code snippet: import { ...

Error: SyntaxError - an argument is missing from the list

Displayed below is the parsed HTML code for a button nested inside a datagrid. Upon clicking this button, I encountered a console error: An Uncaught SyntaxError: missing ) after argument list <button onclick="myFunction(<a href="/cdn-cgi/l/emai ...

guidelines for splitting content into A4 size pages automatically using Vue

Hey there, I'm dealing with the issue of overflowing content not fitting on the next A4 page. My situation: I'll begin with a single A4 page When the content from the previous A4 page overflows, I want the remaining content to move to the next ...

modifying the vertex color of a line in threejs based on individual vertices

I'm working on a project in three.js where I have a line passing through points of a particle cloud. Currently, I am using a canvas renderer and looking to add some randomness by varying the color of the line from vertex to vertex. I came across an ex ...

Displaying Bootstrap 4 dropdown menu on hover

I've noticed that the dropdown menus in Bootstrap 4 are triggered by click by default, but for some reason, my menu is appearing on hover without any additional CSS or JS. This poses a problem for mobile development. I could create a jQuery solution, ...

Accessing variables within the controller's scope

Here is the JSON data I'm working with: { "id": "026001", "description": "Drop Forged Double Coupler", "CASHCUST01": { "hireRate": "0.01500", "saleRate": "2.50000" }, "SMITH00010": { "hireRate": "0.02500", "saleRate": "1.50000" }, " ...

Create a variety of unique objects on the canvas without any repetition or unwanted overlapping

Is there a way to generate objects on a map in a HTML5 Canvas without them overlapping or occupying the same space? I tried checking inside an array to see if the next 20 values are already taken to prevent overlapping, but it didn't work as expected ...

Substitute all instances of <table> with <div> tags, making sure to include specifications for

Currently, I find myself immersed in a project that relies heavily on tables, which isn't exactly ideal but is what the marketing department insists upon... To tackle this issue, I have implemented jQuery to convert all tables into DIVs, and so far, ...