Question

我是新手，在我的一门课上遇到了这种情况：

我有一个简单的Angular应用程序在我的localhost：4200上运行，我想将它发布到RESTHEART本地API。

正如我从RESTHEART教程https://restheart.org/learn/tutorial/获得的那样，我安装了Docker并下载了docker-compose.yml，运行它时，我在localhost：8080中找到了它（我相信这部分还可以）

我尝试了一些有关CORS的信息，但是我没有找到如何在RESTHEART api中启用它的信息。我在RESTHEART上得到了一些信息，说它具有CORS支持，但文字不是很清楚。

当我尝试发布到https://beta.mrest.io/demo/messages时，我没有问题，女巫不是本地主机

此外，我按照本页上的说明操作以获取api https://restheart.org/learn/setup/，但取消注释了“-./etc:/opt/restheart/etc:ro”行，因为它生成了有关无效的端口（如果你们认为有必要，我会在以后添加错误）

这是我的ComponentService，我从中拍摄发布请求（我无法在此处设置其格式以显示出体面的代码，对此我感到很抱歉）

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执行发布请求时，出现以下错误：“从源'http://localhost:8080/db/coll'对'http://localhost:4200'处XMLHttpRequest的访问已被CORS策略阻止：请求标头字段键飞行前响应中，Access-Control-Allow-Header不允许使用该对象”

Answer 1

由于安全方面的考虑，这是正常现象，您可以通过以下链接https://daveceddia.com/access-control-allow-origin-cors-errors-in-angular/

了解它以及可能的解决方法

Answer 2

默认情况下，RESTHeart始终发送CORS标头。如果您仅以docker-compose up开始，然后发送http OPTIONS请求，则应验证它是否正确响应。

例如，下面我首先创建一个数据库“ db”和一个集合“ 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

您看到完全相同的标题吗？

您的错误消息是“飞行前响应中Access-Control-Allow-Headers不允许请求标头字段密钥”：您能否在浏览器中检查Javascript控制台，并查看在发送{{1后，它是否收到任何错误}}请求？

此外，请记住，在发布请求时，请求必须包含application / json的Accept标头

OPTIONS

例如，以下是httpie向RESTHeart发送的完整请求，同时将一个简单的JSON对象发布到“ coll”集合中：

Accept: application/json

您还可以通过以下方式尾随RESTHeart的日志：

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"
}

Answer 3

使用RESTHeart，您不需要key标头，而CORS Access-Control-Allow-Headers不允许这样做。因此，删除以下行代码：

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

key仅在mrest.io中是必需的。在RESHeart网站上，您有一些带有以下注释的示例：

请注意，这些示例将mrest.io云服务用于RESTHeart。它需要api密钥，并且表示格式略有不同。

为什么我无法从本地角度应用发布到在docker上运行的RestHeart本地测试api？

3 个答案: