почему я не могу публиковать сообщения из локального углового приложения в локальный тестовый API RestHeart, работающий в докере? - PullRequest
Новая
       38

почему я не могу публиковать сообщения из локального углового приложения в локальный тестовый API RestHeart, работающий в докере?

0 голосов
/ 12 февраля 2019

Я новичок в angular и получил такую ​​ситуацию на одном из моих классов:

У меня на локальном хосте запущено простое приложение Angular: 4200, от которого я хочу сделать пост в RESTHEART localAPI.

Как я понял из учебника RESTHEART https://restheart.org/learn/tutorial/ Я установил Docker и скачал docker-compose.yml, и при запуске я нахожу его в localhost: 8080 (я считаю, что эта часть в порядке)

Я попробовал некоторую информацию о CORS, но я не нашел, как включить его в API RESTHEART.Я получил некоторую информацию о RESTHEART, в которой говорится, что он поддерживает CORS, но это был не очень разъясняющий текст.

У меня нет проблем при попытке опубликовать на https://beta.mrest.io/demo/messages, ведьма не localhost

Кроме того, я следовал инструкциям на этой странице, чтобы получить 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, я получаю эту ошибку: "Доступ к XMLHttpRequest в" http://localhost:8080/db/coll' от источника'http://localhost:4200' заблокировано политикой CORS: Access-Control-Allow-Headers не разрешает использование ключа поля заголовка запроса в ответе перед полетом "

Ответы [ 3 ]

0 голосов
/ 12 февраля 2019

По умолчанию RESTHeart всегда отправляет заголовки CORS.Если вы просто запустите его с docker-compose up, а затем отправите запрос http OPTIONS, вы должны убедиться, что он отвечает правильно.

Например, ниже я сначала создал базу данных "db" и коллекцию "coll"и затем я использую httpie клиент (но вы можете использовать curl или любой API-интерфейс): 

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?

Кроме того, помните, что при выполнении POST запрос должен содержать заголовок Accept для application / json 

Accept: application/json

Например, ниже приведен полный запрос, который httpie отправляет в RESTHeart при публикации простого JSONобъект для коллекции "coll": 

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
0 голосов
/ 13 февраля 2019

С RESTHeart вам не нужен заголовок key, который не разрешен CORS Access-Control-Allow-Headers.Поэтому удалите следующий код строки: 

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

key требуется только для mrest.io .На веб-сайте RESHeart у вас есть несколько примеров со следующим примечанием:

Обратите внимание, что в примерах используется облачный сервис mrest.io для RESTHeart.Требуется ключ API и немного другой формат представления.

0 голосов
/ 12 февраля 2019

Это нормальное поведение из-за проблем безопасности, вы можете узнать об этом и обойтись по следующей ссылке https://daveceddia.com/access-control-allow-origin-cors-errors-in-angular/

...