如何使用 HttpClient 从 Angular 上传文档到 CouchDB [英] How to upload documents to CouchDB from Angular using HttpClient
问题描述
我在本地计算机上设置了一个新的 CouchDB.当我尝试使用 HTTP POST 方法将新文档上传到现有数据库时，CouchDB 拒绝该请求并声称它是 HTTP OPTIONS 方法.
Typescript 类
我的服务类如下所示.
import { Injectable } from '@angular/core';从'@angular/common/http' 导入 { HttpClient };@Injectable()导出类 DbService {私有静态只读 BASE_URL = 'http://localhost:5984/';私有静态只读 ENTRIES_URL = DbService.BASE_URL + 'entries';构造函数(私有http:HttpClient){}writeEntry(entry: Object): Promise服务通过以下方法使用，位于组件类中.
private onEntry(entry: Object): void {尝试 {console.log('onEntry', entry);this.dbService.writeEntry(entry).then(r => console.log(r)).catch(e => console.error(e));} 捕捉(错误){控制台错误(错误)；}}到目前为止我尝试过的
- 使用 Fauxton，我创建了一个名为 entries 的新数据库
- 我使用 curl 成功将新文档上传到 entries 数据库，如下所示<前>curl -H '内容类型:应用程序/json' -X POSThttp://127.0.0.1:5984/entries -d '{ "amount": 1 }'
- 运行 Angular 代码时(ng serve 和 Chrome 浏览器)
- 我看到控制台日志信息(在服务调用之前)，然后是错误日志.
- CouchDB 记录以下内容(不允许使用 405 方法)<前>[通知] 2019-04-09T06:03:26.304000Z couchdb@localhost 00d60c0651 localhost:5984 127.0.0.1 undefined OPTIONS/entries 405 ok 7
最后一次尝试
如下更改我的服务方法时，POST 方法最终执行到线路，但 CouchDB 记录了 HTTP 415(不支持的媒体类型)
writeEntry(entry: Object): Promise<前>[通知] 2019-04-09T13:35:59.312000Z couchdb@localhost 9910b3c996 localhost:5984 127.0.0.1 undefined POST/entries 415 ok 3
这可能与 CORS 问题有关.
尝试在 CouchDB HTTP 服务器中启用 CORS:https://docs.couchdb.org/en/stable/config/http.html#config-cors
此功能内置于 https://issues.apache.org/jira/browse/COUCHDB-431
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
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
这篇关于如何使用 HttpClient 从 Angular 上传文档到 CouchDB的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
