Issue with Angular 5 HttpClient - PUT request not working in Firefox, however functions correctly in Chrome

Currently in the process of developing a website with Angular 5 and CouchDB. One of my methods in database.service.ts looks like this:

import {HttpClient} from '@angular/common/http';
const auth = my database adress;
constructor(private http: HttpClient) {}

createUser(id: string, email_: string, password: string, firstname: string, surname: string, role: string): any {
    const obj: object = {
      name: firstname, surname: surname_, role, email: email_, password: password_, theme: 'indigo', projects: {}, widgets: {}
    };

    return this.http.put(auth + '/' + id, JSON.parse(JSON.stringify(obj)))
      .map((res: Response) => res);
  }

When creating a user, the method is called like this:

 this.databaseService.createUser(id, email, password, firstname, surname, this.role)
        .subscribe(result => {},
          err => {
            console.log(err);
            alert('No connection to database available!');
          });

This functions correctly in Chrome, but not in Firefox. In Firefox, the PUT request does not execute at all, despite successful GET and POST requests. The headers appear correct ("Accept": 'application/json' etc..), leaving me puzzled as to what might be causing the issue.

Shouldn't it at least attempt execution? I appreciate any insights you may have on this matter.

Thank you for your assistance.

Answer №1

If you encounter issues, it may be beneficial to explicitly set the content-type header. I faced a similar challenge with an older client and this solution worked for me

import { HttpHeaders } from '@angular/common/http';

const httpOptions = {
  headers: new HttpHeaders({
    'content-type':  'application/json'
  })
};
// ...
this.http.put(auth + '/' + id, obj, httpOptions);

Answer №2

Success! I was able to resolve the issue :D The URL for authentication to the CouchDB was

http://username:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3b4b5a48484c54495f7b0a090c150b150b150a">[email protected]</a>:5984/my_database

Interestingly, Firefox seems to be misinterpreting this (I have no idea why!), but when I remove the authentication, it works just fine.

Many thanks for your assistance!

Answer №3

When I encountered a similar issue, the WebAPI was running locally on my machine. While it worked perfectly in Chrome, Firefox failed to provide any response.

After some troubleshooting, it became apparent that Firefox did not recognize the self-signed security certificate. To resolve this, I simply accessed the WebAPI directly by entering https://localhost:3000 in Firefox and granting permission for the security exception.

Following this step, the problem was promptly resolved for me.

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

Capture data from a Telegram bot and store it in a Google Sheet

I am trying to use a spreadsheet through a Telegram bot as a TODO list so that when I input something on my phone, it is saved in the spreadsheet. (I'm following this tutorial https://www.youtube.com/watch?v=XoTpdxbkGGk, which seems accurate with Goog ...

The CSS property object-fit: cover is unable to properly display JPEG images with EXIF orientation greater than 1

I'm having trouble with my Angular app and creating a gallery of photos from my Samsung Galaxy. I am using the "object-fit: cover" css attribute for a nice design, but it only seems to work correctly when the image has an EXIF "orientation" property e ...

Error message appears when using TypeScript with a React Material table showing a generic type error

I am currently attempting to implement react-material in a Typescript project. As a newcomer to Typescript, I am encountering some errors that I am unsure how to resolve. In this gist, I am trying to create a reusable React component (Please view the gis ...

Is bundling a Node.js backend a wise decision or a mistake?

Just a thought that crossed my mind - I understand the advantages of bundling client-side code, but what about bundling server-side code with Browserify/Webpack? Is this considered a best practice? ...

Occasionally, angulafire2's getDownloadURL() function may fail to work with Angular. Could this be due to asynchronous processes?

Receive a 404 error when trying to access . Firebase is reporting a download link error with the following message: "Firebase Storage: Object 'hw04.docx' does not exist." Below is the code snippet related to this issue. upload(event) { cons ...

Location of images in Tomcat for an Angular 7 application

I'm facing an issue with image source paths while working on my local Windows machine (Windows 10, Visual Studio Code 1.30.2) and deploying to Tomcat 9 on an Ubuntu 18.04 server hosted on AWS. When I build on Windows using Powershell: ng build --prod ...

React dynamic table

I've been experimenting with creating a dynamic table in React that allows users to add and delete rows. I need the data entered by the user to be saved, possibly using in-state management so that I can work with it later. Essentially, I'm looki ...

What are the drawbacks of starting with Angular CLI?

Contemplating whether to incorporate Angular CLI into my upcoming project has been on my mind. My main motivation for considering it is to bypass the complexities of setting up a new project and instead focus on mastering the new version of Angular while c ...

Issue encountered when upgrading from Angular 4 to Angular 5: Module '@angular/router' is not found

I recently made the switch from angular 2 to angular 5. However, after the upgrade, I encountered some errors in my ts file. Should I remove @angular/core and @angular/router in angular 5? Here is a snippet of my package.json post-upgrade. Below are the de ...

synchronize the exchange of information and events between two components

Just joined this platform and diving into Angular 7 coding, but already facing an issue. I've set up two components along with a service. The data is fetched by the service upon clicking a button in the searchbar component, and I aim to display it i ...

Enhance your angular application with universal support using the CLI for Angular 6

After creating a new Angular6 application using Angular CLI, I used the following command: ng generate universal This added support for Universal rendering. Everything is working fine, but I noticed that it also added the following code to my angular.jso ...

Angular 7 swiper experiencing navigation issues

I have been attempting to implement the swiper slider but I am facing issues with navigating through slide content. You can find my code on stackblitz - swiper in the last horizontal tab. Here is the TypeScript code: ngOnInit() { var swiper = new Sw ...

Stop Angular 2 from loading on Internet Explorer

I'm looking for a way to stop my Angular 2 application from loading on any version of Internet Explorer. I attempted using a script tag in index.html to detect IE, which was successful. However, when trying to redirect the app to a "not compatible pag ...

Angular form grouping radio buttons in a unique way

Encountering some unusual behavior with radio buttons and forms currently. In my form, I have 4 radio buttons set up. The issue I'm facing is that when I click on a radio button, it remains enabled permanently. This means I can have all 4 options sel ...

How can I resolve the issue of TypeScript AngularJS component modal where the function this.$modalInstance.dismiss is not working?

After converting one of my user data entry forms into a uib-modal, I encountered an issue when trying to close the modal using the "cancel" button. The error message "this.$modalInstance.dismiss is not a function" keeps popping up. The same problem occurs ...

What is the method for retrieving interface key types in TypeScript?

My question relates to an interface. interface Some { key1: string key2: number } I am working with a function. const fn = (key: keyof Some) => { return <Some>someObject[key] } Is it possible to determine the return type based on a string ...

Failure during building Angular 13 library with Ivy partial compilation mode

Recently, I encountered an issue while trying to install an npm package that utilized node-gyp. In an attempt to resolve the problem, I upgraded my Node.js minor version from 16.13.0 to 16.13.1 and also updated my Angular CLI from 13.0.2 to 13.2.0. After ...

Oops! The last loader did not provide a Buffer or String as expected

After converting my GraphQL query and HOC component to typescript, I encountered the following error: ERROR in ./client/components/Protected.Route.tsx Module build failed: Error: Final loader (./node_modules/awesome-typescript-loader/dist/entry.js) didn ...

When the mat-select form-field in Angular is focused, the mat-label vanishes

Recently delved into Angular and have been studying the Material documentation on mat-form-fields. Encountering a strange bug where the mat-label disappears upon focusing the form-field, only to reappear once focus is lost. The issue seems to be specific ...

Angular2 - Transforming SVG elements with dynamic styles using ng-style

I'm trying to create SVG lines using ng-repeat and need to adjust the translation of each line. However, I'm having trouble getting the style to apply using ng-attr-style. my-component.js: import {Component} from 'angular2/core'; @Co ...