Получение ошибки POST 403 (Неверный запрос CORS) при создании новой записи (Угловой 12)

#javascript #angular #typescript #post #http-status-code-403

Вопрос:

API отлично работает на postman, но показывает ошибку post 403 при запуске приложения. Я предполагаю, что ошибка на стороне пользовательского интерфейса. Пожалуйста, помогите мне исправить это!

  1. Я делюсь скриншотами заголовков и страницы ответов сети

Раздел заголовков

Секция ответов

  1. Вот соответствующий код

запись.сервис.ts

{

 import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';




const AUTH_API = 'http://localhost:8080/Disaster-Analysis-0.0.1-SNAPSHOT (5)/';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })
};

@Injectable({
  providedIn: 'root'
})
export class EntryService {

  constructor(private http: HttpClient) { }

  
  public getEntry() {
    return this.http.get(AUTH_API   'oldEntry', httpOptions);
  }

  public addEntry(entry:any) {
    return this.http.post(AUTH_API   'newEntry',entry, httpOptions);
  }}
 

добавить-запись.компонент.ts

{

 import { Component, OnInit } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms';
import { EntryService } from '../_services/entry.service';





@Component({
  selector: 'app-add-entry',
  templateUrl: './add-entry.component.html',
  styleUrls: ['./add-entry.component.css']
})
export class AddEntryComponent implements OnInit {

  alert = false;
  addNewEntry = new FormGroup({

    pincode: new FormControl(''),
    majorDamageInSubdivision_A: new FormControl(''),
    minorDamageInSubdivision_A: new FormControl(''),
    majorDamageInSubdivision_B: new FormControl(''),
    minorDamageInSubdivision_B: new FormControl('')


  })

  constructor(private entry: EntryService) { }

  ngOnInit(): void {
  
  }
  
  createEntry() {
    this.alert = true;
    // this.addEntry.reset()
    this.entry.addEntry(this.addNewEntry.value).subscribe((result: any) => {
      console.log("Get data from service", result)
    })
    console.log(this.addNewEntry.value);
  }
  closeAlert() {
    this.alert = false;
  }
}
 

add-entry.component.html

 {

<div class="jumbotron"> 
 <h3 class='text-center' >Add Entries Form</h3>
</div>

 <div *ngIf="alert" class="alert alert-success alert-dismissible fade show" role="alert">
 <strong>Success!</strong> Data added successfully!
 <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

<form [formGroup]="addNewEntry" (ngSubmit)="createEntry()">
 <div class="form-group">

   <label >Pincode</label>
   <input type="text" class="form-control" placeholder="Enter Pincode" formControlName="pincode">
   <br>
   


   <label>Major Damage Score in Subdivision A</label>
   <input type="text" class="form-control" formControlName="majorDamageInSubdivision_A">
   <br>

 <label>Minor Damage Score in Subdivision A</label>
   <input type="text" class="form-control" formControlName="minorDamageInSubdivision_A">
   <br>

   <label>Major Damage Score in Subdivision B</label>
   <input type="text" class="form-control" formControlName="majorDamageInSubdivision_B">
   <br>
   <label>Minor Damage Score in Subdivision B</label>
   <input type="text" class="form-control" formControlName="minorDamageInSubdivision_B">
   <br>
 </div>
 <button type="submit" class="btn btn-primary">Submit</button>
</form>
 



}
 

Комментарии:

1. Добавьте конфигурацию CORS на свой сервер.

2. @Rana_S Все (если только не играющие) проблемы с CORS являются проблемой сервера? Не могли бы вы передать эту проблему ребятам из бэк-энда?