The Angular AJAX call was unsuccessful due to the Content-Type request header field being forbidden by the Access-Control-Allow-Headers in the preflight response

Here is the code I am using to send a post request from Angular 6 to my web service.

const headers = new HttpHeaders({
      'Content-Type': 'application/json' });
const headeroptions = { headers: headers };
return this.http.post(this.config.productsUrl + '?' + this.common.queryBuilder(options), {data: 'test'}, headeroptions);

The request shows results in the browser network panel, but it throws an error in the console:

Request header field Content-Type is not allowed by Access-Control-Allow-Headers in preflight response.

https://i.stack.imgur.com/Qonrs.png

Answer №1

It is important to include your hostname in the list of allowed CORS origins for the API.

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

What is the process for retrieving paginated data from the store or fetching new data from an API service within an Angular 2 application using ngrx-effects?

After coming across this insightful question and answer about the structure of paginated data in a redux store, I found myself pondering how to implement similar principles using ngrx/store in an angular 2 application. { entities: { users: { 1 ...

No matter the circumstances, the "Unexpected end of form" error consistently appears when attempting to upload files in Express

I'm facing a challenge in implementing a file upload API endpoint for my Express+no-stress+Typescript application. Initially, I attempted to use the express-fileupload library, but I quickly realized that it didn't integrate well with Typescript ...

Trustpilot: The function window.Trustpilot.loadFromElement does not exist in Safari

I am looking to integrate 3 TrustPilots into my Angular application. import { Component, Input, OnInit } from '@angular/core'; declare global { interface Window { Trustpilot: any; } } window.Trustpilot = window.Trustpilot || {}; @Component ...

Using NavController.setRoot within a resolved Promise in an Ionic 2 application

I am currently facing an issue with navigating to another page after a successful login while using the JS Library with Parse Server. When I try to use this.navCtrl.setRoot(TemplatesPage);, it doesn't seem to have any effect in my application. After ...

Dockerized Nginx: Struggling with location configuration issues

Here is the docker file: FROM nginx:1.17.4-alpine # copy artifact build from the 'build environment' COPY ./dist /usr/share/nginx/html/ COPY ./default.conf /etc/nginx/conf.d/ # expose port 80 EXPOSE 80 # run nginx CMD ["nginx", "-g", "daemon o ...

Ways to filter and display multiple table data retrieved from an API based on checkbox selection in Angular 2 or JavaScript

Here is a demonstration of Redbus, where bus data appears after clicking various checkboxes. I am looking to implement a similar filter in Angular 2. In my scenario, the data is fetched from an API and stored in multiple table formats. I require the abili ...

One convenient file for displaying toast notifications, alerts, and loaders specifically designed for the most recent version of Angular

I have been working on a design pattern that involves creating code for various informative widgets such as toast, alert, popup, and loader. My question is where in the angular directory structure should this pattern be placed, and is this approach correc ...

Trouble extracting and utilizing GraphQL queries in Typescript with relay-compiler

I attempted to utilize relay with the Typescript react starter, but I am encountering several problems. It appears that babel-plugin-relay is unable to detect the graphql statements extracted by the relay-compiler. Below is my compiler script: "relay": " ...

Automatically transitioning from a chatbot interface to an Ionic mobile app page as the conversation progresses

My current setup involves incorporating the MS chatbot-framework V3 into my ionic 3 mobile app using Direct line. The goal is to gracefully end the conversation with the chatbot and seamlessly transition to another page within the mobile app, while also p ...

"NameService is not provided in Angular, please check your module

I've been struggling with loading a class into my Angular component. I've spent quite some time trying to figure out the solution, even attempting to consolidate everything into a single file. Here is what I have: Application.ts /// <referenc ...

Instead of tapping the enter key, try searching by keying up

I am implementing a search pipe in Angular for filtering data based on user input import { Pipe, PipeTransform } from '@angular/core'; @Pipe({ name: 'searchPipe', pure: false }) export class SearchPipe implements PipeTransform { ...

Guide to monitoring updates to a universal server-side variable in Angular 2

I am currently developing an application using Angular 2 with Electron and Node. The tests are executed on the server, and the results are stored in a global variable array named testResults. I am able to access this array in Angular by using: declare var ...

What is the process for running an Angular2 application on a mobile device during the development phase?

Currently, I am in the process of developing an Angular2 application. The application can be accessed by using ng s --open, which brings up the results on the browser through http://localhost:4200. In addition, I have set up a server on the same localhost ...

Encountering an issue accessing a property retrieved from a fetch request in TypeScript

I am currently dealing with the property success defined in the API (reCAPTCHA). /** * The structure of response from the veirfy API is * { * "success": true|false, * "challenge_ts": timestamp, // timestamp of the challen ...

Creating adaptable rows and columns with Angular Material's data table feature

My approach to rendering dynamic rows and columns using a basic table was successful: <tbody> <tr *ngFor="let row of data"> <td *ngFor="let val of row"> {{ val }} </td> </tr> </tbody> </ ...

Transforming an array of flat data into a hierarchical tree structure

I'm facing a challenge with my script. I have an Array of FlatObj and some rules, and I need to create a converter function that transforms them into TreeObj. The Rules are: If an object has a higher depth, it should be a child of an object with a l ...

Having trouble locating the Angular project within Django

After successfully installing Angular within my Django project and running the server without errors, I encountered a problem where instead of seeing my Angular app.component.html file, the index.html from the "templates" folder is displayed. The index.ht ...

Utilizing a variable to pass props to a component (instead of a static component) within React Router 5

In react-router 5, you can pass props to a child component in this way: <Route path="/" exact render={ props => <MyPage title={myTitle} dataPath={myDataPath} {...props} />} /> However, I am using a route model in my ...

Child component received an incorrect input value

Utilizing both the "YearComponent" and "StatPeriod" components has presented some challenges for me. Within my YearComponent, I invoke StatPeriod as follows: <app-save-stat-period [dateBegin]="dateBegin" [dateEnd]="dateEnd" byMonth bestNAverage></ ...

Identify the signature of a callback function during runtime

My goal is to pass different callback functions as arguments and have them called with the proper parameters. Here is a simplified example of how it should work. However, determining if process instanceof ITwo makes no sense and I haven't found an ex ...