为什么我不能从本地 angular 应用 post 重新启动在 docker 上运行的本地测试 api？

Question

我是 angular 的新手，在我的类:

中遇到过这种情况

我的 localhost:4200 上有一个简单的 Angular 应用程序运行，从我想制作一个 post 到 RESTHEART local API。

根据 RESTHEART 教程 https://restheart.org/learn/tutorial/ 我安装了 Docker 并下载了 docker-compose.yml 并且当运行它时，我找到了它在localhost:8080（我相信这部分没问题）

我尝试了一些关于 CORS 的信息，但我没有找到如何在 RESTHEART 中启用它 api。我在 RESTHEART 上获得了一些信息，说它支持 CORS，但它不是一个非常清晰的文本。

当我尝试 post 到 https://beta.mrest.io/demo/messages 时没有问题，不是 localhost

此外，我按照此页面中的说明获取 api https://restheart.org/learn/setup/，但取消注释行“-./etc:/opt/restheart/etc:ro”除外，因为它产生了关于无效端口的错误（如果大家觉得有必要我会在后面补上错误）

这是我的 ComponentService，我从那里发出 post 请求（我无法在此处对其进行格式化以正确显示代码，对此我感到很抱歉）

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs';

const host = 'http://localhost:8080/db/coll';
// const host = 'https://beta.mrest.io/demo/messages';

@Injectable()
export class ContatoComponentService {

    constructor(private http: Http) {
    }

    enviarContato(contatoForm: any): Observable<Response> {
        const headers = new Headers();
        headers.append('key', 'demo');
        const nomeCompleto = contatoForm.nomeCompleto;
        const email = contatoForm.contato.email;
        const mensagem = 'Mensagem de teste'; //             contatoForm.mensagem;
        console.log('nomeCompleto', nomeCompleto);
        console.log('email', email);
        console.log('mensagem', mensagem);

        return this.http.post(host, {email: email, from: nomeCompleto, message: mensagem}, { headers: headers});
    }
}

但是当我对 api 执行 post 请求时，我收到此错误："Access to XMLHttpRequest at 'http://localhost:8080/db/coll' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field key is not allowed by Access-Control-Allow-Headers in preflight response"

Answer 1

出于安全考虑，这是正常行为，您可以通过以下内容了解它和可能的解决方法 link https://daveceddia.com/access-control-allow-origin-cors-errors-in-angular/

Answer 2

默认情况下，RESTHeart 始终发送 CORS headers。如果你只是用 docker-compose up 启动它，然后发送一个 http OPTIONS 请求，你应该验证它是否正确响应。

例如，下面我首先创建了一个数据库 "db" 和一个 collection "coll" 然后我使用 httpie 客户端（但你可以使用 curl或任何 API UI):

http -a 'admin:changeit' OPTIONS http://localhost:8080/db/coll

HTTP/1.1 200 OK
Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: Accept, Accept-Encoding, Authorization, Content-Length, Content-Type, Host, If-Match, Origin, X-Requested-With, User-Agent, No-Auth-Challenge
Access-Control-Allow-Methods: GET, PUT, POST, PATCH, DELETE, OPTIONS
Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Location, ETag, Auth-Token, Auth-Token-Valid-Until, Auth-Token-Location, X-Powered-By
Connection: keep-alive
Content-Length: 0
Date: Tue, 12 Feb 2019 14:39:18 GMT
X-Powered-By: restheart.org

你看到完全一样的 header 吗？

您的错误消息是 "Request header field key is not allowed by Access-Control-Allow-Headers in preflight response"：您能否在浏览器中检查您的 Javascript 控制台，看看它在发送 OPTIONS 请求后是否收到任何错误？

此外，请记住，在发送请求时，必须包含对 application/json

的接受 header

Accept: application/json

例如，下面是 httpie 发送到 RESTHeart 的完整请求，同时将一个简单的 JSON object 发布到 "coll" collection:

http -v -a 'admin:changeit' POST http://localhost:8080/db/coll name='RESTHeart'

POST /db/coll HTTP/1.1
Accept: application/json, */*
Accept-Encoding: gzip, deflate
Authorization: Basic YWRtaW46Y2hhbmdlaXQ=
Connection: keep-alive
Content-Length: 21
Content-Type: application/json
Host: localhost:8080
User-Agent: HTTPie/0.9.9

{
    "name": "RESTHeart"
}

您还可以使用以下方式跟踪 RESTHeart 的日志：

docker logs -f restheart

Answer 3

使用 RESTHeart，您不需要 key header，这是 CORS Access-Control-Allow-Headers 不允许的。所以去掉下面一行代码：

headers.append('key', 'demo');

key 只有 mrest.io 才需要。在 RESHeart 网站上，您有一些带有以下注释的示例：

Please note that the examples use the mrest.io cloud service for RESTHeart. It requires the api key and has a slightly different representation format.

为什么我不能从本地 angular 应用 post 重新启动在 docker 上运行的本地测试 api？

why I can't post from local angular app to RestHeart local test api runing on docker?

post

cors

docker

restheart

angular