CORS preflight request receives Access-Control-Allow-Origin header, but the subsequent response remains stalled

After making a CORS request, I received the following set of headers from the server for the preflight OPTIONS request:

Access-Control-Allow-Headers:authorization
Access-Control-Allow-Methods:POST, OPTIONS
Access-Control-Allow-Origin:*
Connection:Keep-Alive
Content-Length:0
Content-Type:application/json
Date:Sat, 09 Dec 2017 21:02:47 GMT
Keep-Alive:timeout=5, max=100
Server:Apache

Although the subsequent POST request was successful, I am still encountering an error in the console.

No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'bla-bla-bla.com' is therefore not allowed access.
 
If an opaque response serves your needs, 
set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

Should the POST response also include the header Access-Control-Allow-Origin:*?

Do I need to take any additional actions from the client side to enable CORS? Thanks :)

Answer №1

Both the preflight and real response must agree to allow with Access-Control-Allow-Origin.

If only the prelight does, then this is how it unfolds:

  1. JavaScript requests permission to send
  2. Browser initiates preliminary request
  3. Server responds with preliminary approval
  4. Browser verifies CORS (passes)
  5. Browser sends actual request
  6. Server replies with actual go-ahead
  7. Browser checks CORS (fails)
  8. Browser bars access for JS to read the reply

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

React Component not retaining its value

I am currently facing an issue with a React component where I need to read a file from an Upload and pass the contents onto a child component for display. Although I can successfully read the file contents using FileReader and see the results in the cons ...

HAML Error: $ is not defined - Uncaught ReferenceError

I am encountering an issue with the following view: /views/admin/home/index.html.haml = render partial: 'general_tab_partial' .box.boxtab %article %h2= _('Global Reporting') .clearfix = form_tag '#', :method = ...

The parameter string could not be transmitted via XMLHttpRequest

Hello, I'm currently facing an issue with sending request parameters through the XMLHttpRequest.send(params) method when trying to get a response from a Web Service. The request parameters seem to not be getting sent properly. Below is the code snipp ...

Effortless integration of jQuery with Google Maps autocomplete feature

I've successfully implemented Google Maps Autocomplete on multiple input tags like the one below: <input class="controls pac-input" id="pac-input" type="text" onfocus="geolocate()" placeholder="Type custom address" /> To enable Google Maps au ...

Filtering an unsorted list through the URL parameter of #value when the page is first

I am currently working on building a portfolio website and have encountered some difficulties with filtering the portfolio elements using Javascript / Jquery. Since I am new to this, I am keeping things simple by implementing a basic filter that shows or h ...

Leveraging the Power of jsPDF in Your Google Apps Scripts

Is it feasible to integrate jsPDF into a Google Apps Script project? I am attempting to create documents using templated HTML, but certain CSS styles like background-color do not translate to PDF when using the getAs() function. Given the limitations of ...

Show the button's value on the text box using JavaScript

When using bootstrap, I encountered an issue where the value of a button would display in a textbox upon clicking it, but then quickly disappear. This unexpected behavior left the textbox empty prematurely. <input type="submit" value="5000t "class="btn ...

Invoking a function in a React component from another component

I am trying to implement a page with the structure shown below: const Upload = (props) => { return ( <BaseLayout> <ToolbarSelection /> <Box> <FileDropArea /> </ ...

Tips for retrieving the option text value following an onchange event in AngularJS

Whenever I change the selection in my dropdown menu for 'Cities', the alert is displaying the value of the previous selection instead of the current one. For example, if I select a state and then switch to Cities, the alert shows the text related ...

The functionality of Jquery is successfully integrated into a specific function, however it seems to only work for one of the calls. To make the other call work,

After a user makes a selection, I am attempting to reset the 'selected' item. This process calls the Vue function tS() shown below. The issue lies with the first call $('#sel1').prop('selectedIndex',0);, as it only seems to wo ...

Issue with using jQuery and parseDouble

I have been dealing with an AJAX request that retrieves a JSON object containing multiple values, each with two decimal points. However, the issue is that when these values are returned as part of the JSON, they are in string format. My goal is to perform ...

Cover the whole page in darkness and emphasize the division element

I attempted to implement a solution I found on stackoverflow without success. The issue is that the blackout feature does not seem to activate - nothing happens. Within my JavaScript code (all enclosed in the $(document).ready(function () tag), it appears ...

The input field displays Spanish text incorrectly when a certain value is set

I am experiencing an issue when trying to enter Spanish text into an input field, as it does not display properly. Strangely, the same text appears correctly when placed inside a div or when already set as the value for the input field. HTML <div>C ...

Issues with the JavaScript, HTML, and CSS Counter Implementation

Is there anyone who can assist me in making this code (available at https://jsfiddle.net/hmatrix/v3jncqac/) function properly? Purpose: My goal is to develop a counter that increments by specified values. My HTML: <body onload="incrementCount(10)"> ...

Utilizing Element IDs for JQuery Tab Implementation

Having two buttons and two divs with paragraphs, I want to create tabs without adding new classes or IDs. Can I achieve tab switching using the existing IDs that end with "_one"? For instance: The first button has the ID "tab_button_one" and the first di ...

Dealing with HTTP status codes in jQuery AJAX requests

Currently in the process of transitioning my scripts to jQuery. Here is snippet of my old JavaScript code: var request = (window.XMLHttpRequest) ? new XMLHttpRequest() : (window.ActiveXObject ? new window.ActiveXObject("Microsoft.XMLHTTP") : false); reque ...

Populate a JSON table in React with checkboxes and automatically mark them based on the JSON data

I'm currently working on creating a React table using JSON data like this: [ { "Id_side": 123, "Name_side": "R4", "Name_cycle": "C1" }, { "Id_side": 345, "Name_side": "M1", "Name_cycle": "C2" ...

The schema encountered an error due to the absence of the save method

My current goal is to allow a logged in user to visit any user's URL and follow them. However, I'm encountering an issue: TypeError: Object { _id: 54bd6b90b7d4cc8c10b40cbd, name: 'Johnny', username: 'batman', __v: 0, ...

When the user clicks, the page will reload before the POST function is executed

Upon clicking the confirm button, the button click function logs the first two entries in the console. However, when executing the post call function, the page reloads causing an undefined index k error and prevents the post function from completing. If I ...

Experience the ultimate entertainment with Flowplayer by watching multiple videos simultaneously in two separate views

I have two separate players in two different views within the DOM. Each player retrieves a video file asynchronously from my database using a unique ID. The first player functions correctly, but I am uncertain how to replicate this for ...