save data with Angular and Firebase [duplicate] - json

Question

This question already has an answer here:
Updating Data in Firebase using React and Axios
(1 answer)
Closed 2 years ago.
i'm creating a Deckbuilder, i have this decks of cards and a data-storage.service to store and fetch the decks in Firebase.
i have a component deck-details that shows the details of a selected deck and allows to remove or add cards to the deck.
i'm trying to store the modified cards in the selected deck in firebase
this is the data-storage service
#Injectable({ providedIn: "root" })
export class DataStorageService {
constructor(private http: HttpClient, private deckService: DeckService) {}
storeDecks() {
const decks = this.deckService.getDecks();
this.http
.put("https://ang-cards.firebaseio.com/decks.json", decks)
.subscribe((response) => {
console.log(response);
console.log("stored");
});
}
fetchDecks() {
return this.http
.get<Deck[]>("https://ang-cards.firebaseio.com/decks.json")
.subscribe((decks) => {
decks
? this.deckService.setDecks(decks)
: this.deckService.setDecks([]);
console.log("fetching", decks);
});
}
storeCards(i: number, cards: Card[]){
this.http
.put("https://ang-cards.firebaseio.com/decks/" + i + "/deckCards", cards)
.subscribe((response) => {
console.log(response);
console.log("cards stored");
});
}
}
storeDecks and fetchDecks work, but i have a problem with storeCards function called in the deck-details component in the onCardsEdit() function.
this is the deck-detail component
import { Card } from "./../../card/card.model";
import { Deck } from "./../../deck/deck.model";
import { Component, OnInit, Input } from "#angular/core";
import { DeckService } from "src/app/deck/deck.service";
import { ActivatedRoute, Params, Router } from "#angular/router";
import { Subscription } from "rxjs";
import { DataStorageService } from 'src/app/shared/data-storage.service';
#Component({
selector: "app-deck-details",
templateUrl: "./deck-details.component.html",
styleUrls: ["./deck-details.component.scss"],
})
export class DeckDetailsComponent implements OnInit {
paramsSubscription: Subscription;
id: number;
decks: Deck[];
deck: Deck;
constructor(
private deckService: DeckService,
private route: ActivatedRoute,
private dataStorageService: DataStorageService
) {}
ngOnInit() {
this.decks = this.deckService.getDecks();
this.id = this.route.snapshot.params["id"];
this.paramsSubscription = this.route.params.subscribe((params: Params) => {
this.id = params["id"];
this.deck = this.decks.find((deck) => deck.id === this.id);
});
}
onDeleteCard(i){
this.deckService.deleteCard(this.deck, this.deck.deckCards[i])
}
onCardsEdit(){
this.dataStorageService.storeCards(this.decks.indexOf(this.deck), this.deck.deckCards)
}
ngOnDestroy() {
this.paramsSubscription.unsubscribe();
}
}
when i try to store the cards i get these 3 errors:
Access to XMLHttpRequest at 'https://ang-cards.firebaseio.com/decks/1/deckCards' from origin 'http://localhost:4200' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
PUT https://ang-cards.firebaseio.com/decks/1/deckCards net::ERR_FAILED
core.js:5882 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "https://ang-cards.firebaseio.com/decks/1/deckCards", ok: false, …}

Answer 1

To interact with the REST API of the Firebase Realtime Database, your URLs must end with .json. Without that, you're trying to access the Firebase console, which returns a cross-origin error when you do.
So the code should look something like:
this.http
.put("https://ang-cards.firebaseio.com/decks/" + i + "/deckCards.json", cards)
...