使用Angular 4 Application从docker中的沙发数据库数据库中获取数据

Question

我有一个在Angular 4中开发的UI应用程序。我还有一个服务超级登录和数据库沙发数据库。我正在向Angular 4应用程序发出请求，请求别名为couchdb：5984并且请求状态失败（失败）net：ERR_CONNECTION_REFUSED

回复：https://github.com/janastu/iihs_couch_services

下面是我的docker-compose.yml

version: '2'
volumes:
couchdb_data: {}
services:
# Build the container using the client Dockerfile
client:
build: ./client
  # This line maps the contents of the client folder into the container.
ports:
  - "80:80"
links:
  - superlogin:superlogin
  - couchdb:couchdb  
couchdb:
environment:
- COUCHDB_USER:somename
 - COUCHDB_PASSWORD:somepassword
volumes:
 - ./client:/usr/src/app

# Build the container using the superlogin Dockerfile
superlogin:
build: ./superlogin>    ports:
- "3000:3000"
# Link the client container so that Nginx will have access to it
links:
- couchdb:couchdb
couchdb:
environment:
- COUCHDB_USER:somename
- COUCHDB_PASSWORD:somepassword
image: klaemo/couchdb:1.6-couchperuser
ports:
- "5984:5984"
volumes:
- "couchdb_data:/usr/local/var/lib/couchdb"

所有容器都已启动并正在运行。 如何从angular 4应用程序访问容器沙发数据库中的数据库？

Answer 1

我假设Angular应用程序在浏览器中执行，例如在使用ng serve的开发上下文中并以http://localhost:4200/访问，对吗？您的本地网络不知道Docker服务名称couchdb - 因此您应该向localhost:5984创建请求。

执行XHR的浏览器需要在CouchDB实例的HTTP响应中设置适当的CORS头，以便执行成功的请求，例如

Access-Control-Allow-Headers: Accept, Content-Type
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Origin: *

有关nginx Web服务器中的示例配置的跨源资源共享（CORS）和https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS的信息，请参阅https://enable-cors.org/server_nginx.html。

如果直接查询CouchDB，则需要启用并配置（从CouchDB 1.3开始提供），请参阅http://docs.couchdb.org/en/stable/config/http.html#cross-origin-resource-sharing和https://wiki.apache.org/couchdb/CORS。

CouchDB的local.ini文件的基本配置示例

[httpd]
enable_cors = true

[cors]
origins = *

由于您的应用程序可能是稍后部署到某个不同环境的目标，因此您可能需要考虑使用Angular environments设置来配置Web服务端点 - 例如适用于dev或prod上下文。