CODEWITHSUNDEEP
angulardockerpostcorsrestheart
Daniel Costa
Daniel Costa

Reputation: 187

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

I'm new to angular and got this situation in one of my classes:

I have a simple Angular app running on my localhost:4200, from witch i want to make a post to a RESTHEART local API.

As i got from the RESTHEART tutorial https://restheart.org/learn/tutorial/ I installed Docker and downloaded the docker-compose.yml and When running it, I find it in localhost:8080(I believe this part is ok)

I tried some info on the CORS but I didn find out how to enable it i n the RESTHEART api. I got some info on the RESTHEART that says it has CORS support but it was not a very clarifying text.

I have no problems when I try to post to https://beta.mrest.io/demo/messages , witch is not localhost

also, I followed the instructions in this page to get the api https://restheart.org/learn/setup/ with the exception of uncommenting the line "- ./etc:/opt/restheart/etc:ro", because it generated a error about invalid ports (if you guys think is necessary I'll add the error later)

This is my ComponentService, from where I shoot the post request(I can't format it here to show the code in a decent way, i'm sory for that)

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});
    }
}

But when I do the post request to the api I get this error: "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"

Upvotes: 1

Views: 168

Answers (3)

Andrea Di Cesare
Andrea Di Cesare

Reputation: 1253

With RESTHeart you don't need the key header, which is not allowed by the CORS Access-Control-Allow-Headers. So remove the following line code:

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

key is only required with mrest.io. On RESHeart web site you have some examples with the following note:

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.

Upvotes: 1

mturatti
mturatti

Reputation: 681

By default RESTHeart always sends CORS headers. If you just start it with docker-compose up and then send an http OPTIONS request, you should verify that it responds correctly.

For example, below I first created a database "db" and a collection "coll" and then I'm using the httpie client (but you can use curl or any 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

Do you see exactly the same headers?

Your error message is "Request header field key is not allowed by Access-Control-Allow-Headers in preflight response": could you check your Javascript console in the browser and see if it receives any error after sending an OPTIONS request?

Moreover, remember that when POSTing the request must contain an Accept header for application/json

Accept: application/json

For example, below is the full request httpie is sending to RESTHeart while posting a simple JSON object to the "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"
}

You can also tail RESTHeart's logs with:

docker logs -f restheart

Upvotes: 1

Thriller
Thriller

Reputation: 505

This is a normal behavior due to security concerns, you can learn about it and possible work arounds over the following link https://daveceddia.com/access-control-allow-origin-cors-errors-in-angular/

Upvotes: 1

Related Questions