angular - 为什么我不能从本地 Angular 应用发布到在docker上运行的RestHeart本地测试api？

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执行发布请求时，出现以下错误:“CORS策略阻止了对来自源http://localhost:8080/db/coll的'http://localhost:4200'处XMLHttpRequest的访问:Access-Control-Allow-Headers不允许请求 header 字段键在飞行前回应中”

Answer 1

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