Requisicao de método POST está se transformando em uma requisiçao de método OPTIONS | Angular 2: webapps ainda mais poderosas parte 1

Estou acompanhando o projeto Alurapic. No meu projeto, o IP da aplicação Angular é diferente do IP do serviço disponibilizado no curso. Venho conseguindo evoluir bem com o curso, mas me deparei com o seguinte problema: Ao tentar criar uma requisição POST para salvar uma foto, noto que não é enviado um POST para o serviço, mas uma requisição de método OPTION! Além disso, notei nas mensagens de erro o seguinte texto: Requisição cross-origin bloqueada: A política de mesma origem (Same Origin Policy) impede a leitura do recurso remoto em http://localhost:3000/v1/fotos. (Motivo: o cabeçalho CORS 'Access-Control-Allow-Origin' não está presente).

O estranho é que eu já adicionei o cabeçalho "Access-Control-Allow-Origin" do lado do serviço, prova disso é que o método GET está funcionando! Fiz alguns testes aqui e verifiquei que se eu retirar o parametro "headers" da chamada a requisição não vira um OPTION!

POST sem o header não apresenta o problema acima descrito, mas o servidor não consegue se resolver corretamente por falta do cabeçalho:

this.http.post('http://localhost:3000/v1/fotos', JSON.stringify(this.foto))

O meu método cadastrar (conforme ensinado no curso de Angular2):

cadastrar(event) {
        event.preventDefault(); // impede que o evento padrao de envio do formulario recarregue a pagina
        console.log(this.foto);

        // Teste com cabecalho (faz requisicao option => problema que nao consegui resolver)
        // persiste no banco
        const headers: Headers = new Headers();
        headers.append('Content-Type', 'application/json');
        this.http.post('http://localhost:3000/v1/fotos', JSON.stringify(this.foto), { headers: headers })
            .subscribe(() => {
                this.foto = new FotoComponent();
                console.log('Foto Salva Com sucesso');
            }, erro => console.log(erro));
    }

Alguém sabe como resolver esse problema do POST sendo enviado como um OPTION ? Valeu.

Tive que fazer uma adaptacao pontual do lado do servidor para resolver o problema (adicionei suporte a metodos OPTIONS - antes inexistente - devolvendo os devidos headers ao cliente). O arquivo que tive que modificar está em alurapic/server/app/routes/index.js

A seguir o trecho de código que resolve o problema:

app.route('/v1/fotos')
        .post(api.adiciona)
        .get(api.lista)
        .options((req, res) => {
             res.setHeader('Access-Control-Allow-Origin', '*');
             res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
             res.setHeader("Access-Control-Allow-Headers", 'Origin, X-Requested-With, Content-Type, Accept');
             res.end();
    });

Eu sugiro a leitura desse artigo para entender melhor o problema e o motivo pelo qual a solução acima funciona: http://restlet.com/company/blog/2015/12/15/understanding-and-using-cors/

Mergulhe em programação