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

Encapsulate the module function and modify its output

Having trouble parsing JSON data from $_POST while utilizing AngularJS

Is it possible to modify the appearance or behavior of a button in a React application based on its current state?

Getting a specific value from a REST API array in JavaScript: Tips and tricks

Utilizing jQuery to extract the `h1` element from a dynamically loaded external page within the

Ways to prioritize HTML5/CSS3 navigation menu above the content

How can a reusable ng-pattern be written in AngularJS?

What would be the ideal alternative if the Google Ajax API is unavailable, given that Google does not allow for local installation?

Guide to dynamically updating a textarea in vue.js by incorporating data from several inputs

Display modal after drop-down selection, triggered by API response

Eliminating the use of undefined values in JavaScript output

Unable to retrieve the initial return value from the function that has been promisified

The command is not currently carrying out its function

Searching for data across multiple tables using the Laravel framework combined with Vue.js and API integration

JavaScript and AJAX are showing an error message that says: "ReferenceError: x is not

Having trouble assigning the current page in NextJS navigation

What is the best way to implement JQuery in order to trigger an event in a text box whenever the user hits the "enter

Can D3 transform regions into drinking establishments?

What is the proper method for delivering Javascript code with rendered HTTP to a client?

Step-by-step guide for serving static JavaScript files using NextJS