Is there a way to eliminate preflight requests from the $http header?

    //loop through individual logins
    $rootScope.setting.instances.forEach(function(ins) {

        var header = { 
                    "Accept": "application/json",
                    "Authorization": "Basic " + btoa( ins.uname + ':' + ins.pword ),
                    "Access-Control-Allow-Origin" : "*",
                    "Access-Control-Allow-Methods" : "GET, POST, DELETE, PUT, JSONP"

                };      

         $http({ method : 'post', url : ins.url, headers: header })
         .success( function( data )
         {
            console.log( ins.name +" login success" );
            $("#fail" + ins.id ).hide();
            $("#succ" + ins.id ).show();
            //logins : an app.js global variable
            logins.push('{"ins" : '+ ins.id + ',"isAvailable" : "true"}');
            checkFinished();
         })
         .error( function( data)
         {
            console.log( ins.name +" login failed" );
            $("#fail" + ins.id ).show();
            $("#succ" + ins.id ).hide();
            //logins : an app.js global variable
            logins.push('{"ins" : '+ ins.id + ',"isAvailable" : "false"}');
            checkFinished();
         });
    });
}

Answer №1

According to the CORS specification, when a browser encounters custom headers in a cross-origin request, it must first send an OPTIONS preflight request to determine which custom headers are allowed. During this preflight process, the browser does not include the custom headers from the original request. Therefore, servers should not require custom headers in the OPTIONS request if they want the browser to work properly.

If you wish to avoid the OPTIONS preflight request, simply refrain from using custom headers in your requests.

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

Clicking the table initiates several AJAX operations to run using jQuery

As I searched for a solution to my problem, I reached a turning point where I could finally define the issue at hand. My code utilizes jQuery and Ajax, which are triggered by clicking on a table cell. The result is a table that I refresh at regular interva ...

The issue I am facing involves a 404 not found axios error when attempting to send a post request

I am attempting to send data via a post request from react.js to express.js using axios, but I keep encountering a 404 not found axios error. You can view the error image here. Below is my code: export default function Upload() { const [state, setState ...

Using a CSS button to activate a JavaScript function: A step-by-step guide

My current project involves writing a script to change the color of text when a specific button is clicked. The idea is that clicking the "Change color1" button triggers the text color change using the following code snippet: <button onclick="myFunction ...

Tips for preventing a React component from re-fetching data when navigating back using the browser button

In my React app using Next.js and the Next Link for routing, I have two pages set up: /product-list?year=2020 and /product-list/details?year=2020&month=4 Within the pages/product-list.js file, I am utilizing React router to grab the query parameter ye ...

Using JavaScript to organize and categorize data within an array

I am working with a multidimensional array and need to filter it based on the value at a specific index position. Here is what the array looks like: arr = [ [1 , 101 , 'New post ', 0], [2, 101 , 'New Post' , 1], ...

Which names can be used for HTML form tags in jQuery?

Recently, I encountered an issue related to jQuery form serialization which stemmed from naming a form tag "elements". The problem arose when using jQuery $(’form’).serialize(). Here is an example of the problematic code: <form> <input name=" ...

Elements with absolute positioning are preventing drag events from executing

Struggling to create a slider and encountering an issue. The problem lies in absolute items blocking slider drag events. I need a solution that allows dragging the underlying image through absolute positioned items. Any ideas on how to achieve this? MANY T ...

Service limitations preventing the creation of modules due to multiple functions

I am using a CRUD module called activities instead of the default articles, but the structure of the module remains unchanged. When I navigate to the page for creating a new activity, the activities.create state is triggered (similar to the articles state ...

Guide on encoding a string to JSON

I am currently developing a web application using the struts+java+hibernate framework with MySQL 5 as the database. The user interactions are stored in the database and then displayed to other users. Recently, there has been a change in the implementation. ...

Encountering a "args" property undefined error when compiling a .ts file in Visual Studio Code IDE

I've created a tsconfig.json file with the following content: { "compilerOptions": { "target": "es5" } } In my HelloWorld.ts file, I have the following code: function SayHello() { let x = "Hello World!"; alert(x); } However ...

Show or conceal a bootstrap spinner using a function

Quandary I am facing an issue with displaying a bootstrap spinner while a function is running. The spinner should be visible during the execution of the function and disappear once it is done. Here is the code for the bootstrap element: <div id="res ...

The x-axis in c3.js is experiencing issues with plotting when there is interval data in DST time

Trying to create a graph using the c3.js library with an x-axis interval of time. The intervals are determined by selecting a date range in the date picker. For example, if we select the dates 2016-03-13 00:00 to 2016-03-13 04:00, we add 15 minutes to ...

What is the best approach to assigning a default value to each cascading dropdown using Angular?

I've successfully implemented the dropdown functionality below. Now, I just need help setting default values for each level in the hierarchy. While I know how to do this for the top-level, I'm unsure of how to set defaults for subsequent levels. ...

Retrieving a string during an update request within the KendoUI datasource

I am facing an issue with my grid and data source setup. The schema.parse function is causing some unexpected behavior. Whenever I try to update or create a new row, the schema.parse() function is called again. The parameter passed to it is a string conta ...

Saving data to a database using jQuery Ajax when multiple checkboxes are checked

Looking for a solution to store checkbox values into a database using jQuery Ajax to PHP. https://i.sstatic.net/tdjm9.png To see a live demo, click here. The image above illustrates that upon checking certain checkboxes and clicking Update, the checkbox ...

Obtain the position and text string of the highlighted text

I am currently involved in a project using angular 5. The user will be able to select (highlight) text within a specific container, and I am attempting to retrieve the position of the selected text as well as the actual string itself. I want to display a s ...

Tips for preserving newly add row with the help of jquery and php

Currently, I am attempting to implement a functionality on a Wordpress theme options page that dynamically adds rows using jQuery. Below is the HTML code snippet from the THEME-OPTIONS page <a href="#" title="" class="add-author">Add Author</ ...

The enigma of the mysterious karma provider error

As a newcomer to unit testing in JavaScript, AngularJS, and Karma, I have successfully written passing tests for controllers. However, when trying to test services, I encountered an error: Unknown provider <- nProvider <- User. The User service is th ...

How can you customize the bottom and label color for Material-UI TextField when in error or when in focus?

I need to customize the color of my Material UI TextField component for the following states: error focused Currently, I am using version 3.8.1 of @material-ui/core and working with the <TextField /> component. I would like to achieve this withou ...

What is the best way to toggle an element's visibility using the select tag?

Let me break down the issue for you. In my HTML code, I have a select element that looks like this: <select id="seasons" multiple="multiple"> <option value="s01">Season 1</option> <option value="s02">Season 2</option> ...