What is the process for deleting headers in a $http.get call and simultaneously including "application/json" and "text/plain" under the "Accept" header?

Question

What is the process for deleting headers in a $http.get call and simultaneously including "application/json" and "text/plain" under the "Accept" header?

I'm relatively new to angularjs and I'm currently working on implementing some new features to an existing Angular JS application. The current API calls are quite intricate so I decided to make a direct call. Below is the code snippet for my new call:

https://i.stack.imgur.com/CktpX.jpg

Existing calls to the api from the AngularJS code are successful and have specific headers as shown in the "Works" section at the top of the image below (highlighted in red text). However, my new call includes additional headers like Access-Control-Request-Headers and Access-Control-Request-Method as seen in the "Fails" section at the bottom of the image below.

https://i.stack.imgur.com/9fcK0.jpg

Upon checking the Console in Chrome, I encountered the following error message for my new request: XMLHttpRequest cannot load http://localhost/blablabla/v1/login.json. Request header field Authorization is not allowed by Access-Control-Allow-Headers.

I also noticed that the "Accept" header in the request is missing "application/json" and "text/plain". How can I include these in the "Accept" header and remove the "Access-Control-Request-Headers" and "Access-Control-Request-Method"?

javascript angularjs xmlhttprequest

Answer 1

Answer №1

Below is an illustration on how to set $http request options:

 var config = {
   method: 'GET',
   url: 'http://sample.com',
   headers: {
     'Content-Type': 'application/json'
   },
   params: { name: 'John' }
 }

 $http(config).then(function(){...}, function(){...});

Answer 2

Below is an illustration on how to set $http request options:

 var config = {
   method: 'GET',
   url: 'http://sample.com',
   headers: {
     'Content-Type': 'application/json'
   },
   params: { name: 'John' }
 }

 $http(config).then(function(){...}, function(){...});

Answer 3

Answer №2

I have found that the headers "application/json" and "text/plain" are missing from the "Accept" header in my request. How can I include these in the "Accept"?

It seems like the browser is initiating a preflight OPTIONS request. Once it receives permission from the server, you should see the desired header when it proceeds to make a GET request.

(The root issue may be that the server is not properly configured to handle the preflight request.)

Is there a way to remove the "Access-Control-Request-Headers" and "Access-Control-Request-Method" from the request?

Unfortunately, unless you remove the conditions that necessitate a preflight request, you cannot eliminate these headers. They are automatically included by the browser during the preflight request process.

Answer 4

I have found that the headers "application/json" and "text/plain" are missing from the "Accept" header in my request. How can I include these in the "Accept"?

It seems like the browser is initiating a preflight OPTIONS request. Once it receives permission from the server, you should see the desired header when it proceeds to make a GET request.

(The root issue may be that the server is not properly configured to handle the preflight request.)

Is there a way to remove the "Access-Control-Request-Headers" and "Access-Control-Request-Method" from the request?

Unfortunately, unless you remove the conditions that necessitate a preflight request, you cannot eliminate these headers. They are automatically included by the browser during the preflight request process.

What is the process for deleting headers in a $http.get call and simultaneously including "application/json" and "text/plain" under the "Accept" header?

Answer №1

Answer №2

Similar questions

Is there a way in Reactjs Material UI 5 (MUI5) to unselect only the star that was clicked, without affecting the rest of the stars in the

Trouble with the JavaScript split function

How to download a dynamically generated PHP file to your local machine

What is the best way to toggle text visibility with a button click and what alternative method can be used if getElement does not work?

executing jQuery toggle on freshly generated content

Looping through jQuery, I am adding divs, but frustratingly I can only insert text into the initial div created. Why

React JS routes function properly only upon being reloaded

css problem with scaling in firefox

Combining arrays of objects in JavaScript

Livereload in Gulp fails to automatically restart the server

Leveraging the power of AWS API Gateway and Lambda for seamless image upload and download operations with Amazon

I'm struggling to make the jquery parentsUntil function work properly

The pre tag does not have any effect when added after the onload event

Encountered a problem when trying to import the function "createToken" into a Node.js middleware

Exporting JSON blend files in Three.js is causing an error that says "Cannot read property 'type' of undefined."

Unable to align span vertically using font-style "Luckiest Guy" in CSS

What is the best way to extract data from a textarea HTML tag and store it in an array before iterating through it?

Automatically use JavaScript to send an email to my email address

Identifying when an element hovers over a particular section

Limit the rotation of jQuery and CSS3 elements to always turn in a clockwise direction