How to upload documents to CouchDB from Angular using HttpClient

Question

I set up a new CouchDB on my local computer. When I try to upload new documents to an existing database using HTTP POST method, CouchDB refuses the request and claims it was HTTP OPTIONS method.

Typescript classes

My service class looks as follows.

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

@Injectable()
export class DbService {

    private static readonly BASE_URL = 'http://localhost:5984/';
    private static readonly ENTRIES_URL = DbService.BASE_URL + 'entries';

    constructor(private http: HttpClient) { }

    writeEntry(entry: Object): Promise<Object> {
        return this.http.post<Object>(DbService.ENTRIES_URL, entry).toPromise();
    }
}

The service is used by the following method, located in a component class.

private onEntry(entry: Object): void {
    try {
         console.log('onEntry', entry);
         this.dbService.writeEntry(entry)
             .then(r => console.log(r))
             .catch(e => console.error(e));
    } catch (error) {
        console.error(error);
    }
}

What I tried so far

Using Fauxton, I created a new database named entries

I successfully uploaded new documents to the entries database using curl as follows

curl -H 'Content-Type: application/json' -X POST 
http://127.0.0.1:5984/entries -d '{ "amount": 1 }'

When running the Angular code (ng serve & Chrome Browser)
- I see the console log info (before service call), followed by the error log.
- CouchDB logs the following (405 Method not allowed)
```
[notice] 2019-04-09T06:03:26.304000Z couchdb@localhost  00d60c0651 localhost:5984 127.0.0.1 undefined OPTIONS /entries 405 ok 7  
```

Last Attempt

When changing my service method as follows, the POST method is finally carried on to the wire but CouchDB logs an HTTP 415 (Unsupported Media Type)

writeEntry(entry: Object): Promise<Object> {
    const httpHeaders = new HttpHeaders();
    httpHeaders.set('Accept', 'application/json');
    httpHeaders.set('Content-type', 'application/json');
    const httpOptions = {
      headers: httpHeaders
    };
    return this.http.post<Object>(DbService.ENTRIES_URL, JSON.stringify(entry), httpOptions).toPromise();
}

[notice] 2019-04-09T13:35:59.312000Z couchdb@localhost  9910b3c996 localhost:5984 127.0.0.1 undefined POST /entries 415 ok 3

horistack horistack · Accepted Answer · 2019-04-12T13:14:08

This might have to do with CORS issues.

Try enabling CORS in the CouchDB HTTP Server: https://docs.couchdb.org/en/stable/config/http.html#config-cors

This feature was built in with https://issues.apache.org/jira/browse/COUCHDB-431

How to upload documents to CouchDB from Angular using HttpClient

1 Answers