I seem to be encountering an issue with my Angular 6 HTTP PUT request

Below is the code snippet:

products.service:

updateCategorie(ucategorie: Icategorie) {
const endpoint = this.url + 'api/Category/Edit';

const headers = new Headers();
headers.append('Authorization', 'Bearer ' + localStorage.getItem('access_token'));
const options = new RequestOptions({
  headers: headers
});

console.log('access_toke: ', localStorage.getItem('access_token'));

return this.http.put(endpoint, ucategorie, options)
.pipe(map((res) => {
  return res.json();
})).toPromise();

All fields have values and the access token is being sent. product.component.ts:

updateCategorie() {
this.spinner.show();
console.log('catudata: ', this.categorieudata.value);
this.authent.updateCategorie(this.categorieudata.value).then((res) => {
  if (res) {
    this.spinner.hide();
    if (confirm(this.categorieudata.value.Category_name + 'have been updated')) {
      this.ngOnInit();
    }
  }
}, (err) => {
  this.spinner.hide();
  if (confirm('An error occured please try again')) {
    this.ngOnInit();
    console.log('###error: ', err);
  }
});
}

However, encountering the following error:

Access to XMLHttpRequest at 'http://api-accountingsystem.azurewebsites.net/api/Category/Edit' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

I have successfully used the same method for another request. Could someone kindly assist me with this issue?

Answer №1

It turned out that the mistake was actually not in any of the functions mentioned earlier, but rather in an additional field that I mistakenly included in my FormGroup. After carefully reviewing the fields, I finally noticed it.

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

Retrieve the value from an input tag that is only displayed based on a condition using *ngIf

In my HTML form, I have implemented conditional visibility of input fields based on the radio button selection using *ngIf. <table> <tr> <td><label>name</label></td> <td><input #name />&l ...

Choosing a personalized component using document selector

Currently, I am working on an application using Stenciljs and have created a custom element like this: <custom-alert alertType="warning" alertId="warningMessage" hide>Be warned</custom-alert> The challenge arises when attem ...

Encountered an error with Aurelia webpack 4 when trying to load a necessary CSS file during runtime

I encountered a unique issue with webpack and aurelia that I can't seem to figure out. After creating a new webpack configuration based on online resources and official documentation, the compilation goes smoothly without any errors. However, during r ...

Navigating a relative path import to the correct `@types` in Typescript

When the browser runs, I require import * as d3 from '../lib/d3.js'; for d3 to be fetched correctly. I have confirmed that this does work as intended. However, the file that contains the above code, let's call it main.js, is generated from ...

Angular 6 tutorial: Creating a dynamic side navigation bar with swipe and drag functionality using Angular Material/Bootstrap

I am currently working on implementing a vertical swipeable/stretchable side nav-bar with angular-material in angular 6. However, I have encountered an issue with mouse interactions for stretching the nav-bar. Below is the code snippet: Here is the HTML c ...

Disable the default animation

Is there a way to disable the default animation of the Select label in my code snippet below? export default function TicketProfile(props: any) { return ( <Container> <FormControl sx={{ ml: 1, mr: 1, minWidth: 220 }}> <Inp ...

How to assign multiple values within nested for loops in Angular 6

I am facing an issue with my template file where I have two loops. I am attempting to bind the second value using the first loop value, but I am encountering an error. <tr *ngFor="let splitdata of mf.data"> <td *ngFor="let slitup of searchFie ...

Is it possible to insert a button into a specific column of an ngx-datatable within an Angular 8 application?

I am having trouble with this particular HTML code. <ngx-datatable-column name="Option" prop="option" [draggable]="false" [resizeable]="false [width]="250"> <span> <button class="optionButton" type="button" data-to ...

Issue: NG0204: Unable to find solutions for all parameters in NzModalRef: (?, ?, ?)

I'm currently working on an Angular project utilizing the NZ-Zorro library, and I'm encountering difficulty understanding which parameters are causing issues with NzModalRef when attempting to run the test code coverage. The error message display ...

Tips for effective page management

After creating a navbar in my project, I've come to the realization that it requires a component for each page and subpage. This seems redundant especially when dealing with multiple navigation options like shown in this image. Is it necessary to crea ...

Exploring the options variables within CLI commander Js action

As a newcomer to developing CLI apps, I've chosen to work with ts-node and commander. However, I'm currently facing a challenge in understanding how to access the options that users pass into my command action. program .version(version) .nam ...

Leverage the spread operator (or an equivalent method) to transfer all attributes from a solitary mixin

When working with the example below, my goal is to pass only the properties of MyMixedInProps to MyChildComponent using a method similar to the spread operator ({...props}). In my specific scenario, MyMixedInProps is defined in a third-party library (whic ...

What is the best way to interpret the data from forkjoin map?

As a newcomer to angular and rxjs, I am seeking guidance on how to properly retrieve data from forkJoin using a map function. ngOnInit(): void { this.serviceData.currentService.subscribe(service => this.serviceFam.getAllFamilles().pipe( ...

Struggling to position a div below another div within a flex box layout

https://i.sstatic.net/8vZSW.jpg When trying to make the Information & advice header appear above the other div elements, I encountered an issue with flexbox. Despite setting the container div to have a flex direction of column, the header div continue ...

Unable to populate an array with a JSON object using Angular framework

Here is the JSON object I have: Object { JP: "JAPAN", PAK: "PAKISTAN", IND: "INDIA", AUS: "AUSTRALIA" } This JSON data was retrieved as a response from an HTTP GET request using HttpClient in Angular. Now, I want to populate this data into the following ...

Tips for displaying dynamic data using innerHTML

Recently, I set out to implement an infinite scroll feature in Angular 2 using JavaScript code (even though it may seem a bit unusual to use JavaScript for this purpose, it's actually working perfectly). Initially, I was able to create an infinitely s ...

The debugger extension for Visual Studio Code in Chrome, [webkit-debug-adapter], received a response from the target application, but was unable to find any valid target

I am currently working on an Angular/TypeScript application and have been able to debug the TypeScript code in Chrome thanks to the map files. Recently, I decided to install the Debugger for Chrome extension from Visual Studio Marketplace. You can find it ...

Electron does not have the capability to utilize Google's Speech to Text engine

I am trying to connect my microphone with the Google Speech to Text engine. I came across this page and copied the code into my renderer.ts file, uncommented the lines with const, but when I run it, I encounter an error at line 7 (const client = new speech ...

Guide to extracting the JSON array from a JSON object with Angular

In my angular application, I have made a call to the API and retrieved a JSON object in the console. However, within this JSON object, there are both strings and arrays. My task now is to extract and parse the array from the object in the console. The JSO ...

Could it be that the TypeScript definitions for MongoDB are not functioning properly?

Hello everyone, I'm facing an issue with getting MongoDB to work in my Angular 4 project. In my code, I have the db object as a client of the MongoClient class: MongoClient.connect('mongodb://localhost:27017/test', (err, client) => { ...