1

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

我有一个简单的 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 发出 post 请求时，我收到此错误：“从源 ' http: // localhost:4200 ' 访问 XMLHttpRequest 已被 CORS 策略阻止: 预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段键"

4

3 回答 3

1

由于安全问题，这是一种正常行为，您可以通过以下链接了解它和可能的解决方法https://daveceddia.com/access-control-allow-origin-cors-errors-in-angular/

于 2019-02-12T01:22:45.067 回答
1

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

例如，下面我首先创建了一个数据库“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 控制台，看看它在发送OPTIONS请求后是否收到任何错误？

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

Accept: application/json

例如，下面是 httpie 在将一个简单的 JSON 对象发布到“coll”集合时发送到 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"
}

您还可以使用以下命令跟踪 RESTHeart 的日志：

docker logs -f restheart
于 2019-02-12T15:12:58.480 回答
1

使用 RESTHeart 您不需要key标头，这是 CORS 不允许的Access-Control-Allow-Headers。所以删除以下行代码：

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

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

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

于 2019-02-13T17:28:32.813 回答