Why does this straightforward CORS request require a pre-flight options verification?

I've encountered an issue with a CORS request to a cross-origin resource. My assumption was that since it's a POST request with a parameter, it would qualify as a simple CORS request and not require a pre-flight call. However, that doesn't seem to be the case.

In addition, due to using .NET Web API, any simple data-type must be passed on the query string in a POST request.

I'm using the angular $http method for the post.

OPTIONS:

Request URL:http://api.local.foundation.com/account/LoginAutomatically?key=null
Request Method:OPTIONS
Status Code:200 OK
Request Headersview source
Accept:*/*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, content-type
Access-Control-Request-Method:POST
Cache-Control:no-cache
Connection:keep-alive
Host:api.local.foundation.com
Origin:http://www.local.foundation.com
Pragma:no-cache
Referer:http://www.local.foundation.com/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
Query String Parametersview sourceview URL encoded
key:null

POST:

Request URL:http://api.local.foundation.com/account/LoginAutomatically?key=null
Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:no-cache
Connection:keep-alive
Content-Length:0
Content-Type:application/json;charset=utf-8
Host:api.local.foundation.com
Origin:http://www.local.foundation.com
Pragma:no-cache
Referer:http://www.local.foundation.com/
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.63 Safari/537.36
Query String Parametersview sourceview URL encoded
key:null

Answer №1

The reason for the preflighting of your CORS request is the Content-Type specified in your request. The use of "application/json" categorizes your request as a "non-simple" CORS request, hence the need for preflighting. If you were to use a Content-Type like "text/plain" instead, there would be no need for preflighting in this scenario.

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

`Erase content from a field once text is typed into a different field`

I have a Currency Converter with two input fields and a button. I enter the amount to be converted in the first field, and the result of the conversion appears in the second field. My question is: How can I automatically clear the second field when I type ...

Adding items to a dropdown list using AngularJS

I'm attempting to add an item to my dropdown list by targeting its ng-class after a save function in AngularJS. However, I am struggling to understand what the issue might be as I am still new to AngularJS. Any advice would be greatly appreciated: Dr ...

async.series: flexible number of functions

Hello everyone, I'm currently working with Node.js (Express) and MongoDB (mongooseJS). My goal is to create a series of async functions that query the database in the right order. Here is my question: How do I go about creating a variable number of a ...

Personalize buttons using SweetAlerts 2 customization options

In order to adhere to the custom design provided to me, I am currently using SweetAlerts 2 for all dialog boxes that require confirmation or cancellation. Specifically, I require the cancel button to have a white background with teal text and a teal border ...

Can HTML5 and JavaScript be used to clip a portion of a video and upload it directly to a server?

Currently, I am using Filereader to read a local video file (mp4) in order to display it in a video tag. However, I am looking to cut a specific part of the mp4 file (for example, from 5 to 10 seconds) and then upload it to a server. My current approach: ...

React: Submit button not triggering form submission despite having a valid submit event handler and correct syntax

My question stands out from existing ones as it features valid syntax, correct use of type="submit" on the button, and a simple onSubmit handler on the form. Despite this, clicking the button fails to trigger the onSubmit handler. To illustrate ...

Issue with external variable not being updated properly in success callback

Working through an array of data, I make updates to a variable called commentBody during each iteration. However, even though the variable is modified within the loop itself, whenever I try to access it from inside a success callback, it consistently show ...

File not found: The specified file 'C:Self Project eact-shopper eact-shopperclientuildindex.html' does not exist

I followed the tutorial and startup code by Reed Barger exactly, but every time I try to run the server I encounter this error: Error: ENOENT: no such file or directory, stat 'C:\Self Project\react-shopper\react-shopper\client&bso ...

To successfully handle this file type in Next.js, make sure you have the necessary loader configured as no loaders are currently set up to process this specific file

I encountered an issue when trying to load an image from a local directory in my Next.js application Failed to compile ./pages/components/image.png 1:0 Module parse failed: Unexpected character '' (1:0) You may need an appropriate loader to hand ...

Storing Node_modules in a separate directory

All my node modules are located in the path C:/Users/user/AppData/Roaming/npm/node_modules. I am attempting to include these node modules with babel and babel-presets for my webpack scripts. Here is my webpack.config.js module.exports = { context: &a ...

Angular DataTable jQuery

I am a huge fan of jQuery DataTable, but I have come to realize that when using AngularJS, it does not function properly. Instead of displaying the data with pagination, it shows "No data available in table Showing 0 to 0 of 0 entries." I have checked ou ...

How can I utilize jQuery to add tags in a box?

I have an idea for a feature similar to the Stack Overflow tag insert. My goal is to have a box where I can type in a tag, click 'Add', and see it appear above. Additionally, I want this action to update an array called 'SelectedTags'. ...

What is the best way to trigger a re-render of a Vue component after a change in Vuex

I'm interested in developing a custom component to modify the basemap of a leaflet map without relying on L.control.layers. To achieve this, I created a sidebar component that offers options to switch between different basemaps. In my implementation, ...

Discovering the nearest sibling using jQuery

My HTML code snippet is as follows: $(".remove-post").click((event) => { $(event.target).fadeOut(); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="side-bar"> <b ...

Issue with v-model not updating data correctly when using switch and select dropdown in VueJS

I am developing a dynamic admin panel that includes a CRUD generator using Laravel and Vue. Within my table, I am asynchronously loading data from an API. One specific column in the table, called is_featured, needs to function as a switch. This will allow ...

Tips for loading a partial view page in a specific element using Angular JS after clicking a button

I'm facing an issue with my AngularJS partial view page not loading after a button click. I've set up the initial rendering page, but when we click the button, the partial view page doesn't render properly because the angular modules are not ...

Which jquery Grid is capable of handling a constant flow of updates in json format?

Provided below is a brief summary of this extensive post (please read the entire post to provide an answer): Current Implementations: The website retrieves a large json dataset (approximately 30kb, already compressed) The data is rendered as an HTML tab ...

Iterating through an array of objects and performing reduction based on various key-value pairs

I am faced with a challenge of consolidating a large array of objects into one single array that has a specific structure. Each item, such as a banana, needs to be present in two separate objects for buy orders and sell orders, each with their own distinct ...

My code gets disrupted when I use classes instead of IDs

My HTML code works fine when I use IDs and select them in my javascript with getElementByID. However, if I switch to using classes instead of IDs, my code stops working. I want to switch to using classes because I am collaborating on a project with someon ...

Is it possible to duplicate the mesh thousands of times and animate it without causing significant performance issues

I have created a demo with numerous cubes that share the same geometry and texture: texture = THREE.ImageUtils.loadTexture ... material = new THREE.MeshLambertMaterial( map: texture ) geometry = new THREE.BoxGeometry( 1, 1, 1 ) cubes = [] for i in [0..1 ...