Error: That is not Equal to the supplied origin

Question

I’m trying to get records that are in an API on the server Heroku with the following URL https://mdw-arm-wladimir.herokuapp.com/noticias

But when I receive this url in my Angular project it generates this error;

This is my Angular class of services

import { Noticia } from './../core/model';
import { Injectable } from '@angular/core';

import { Http, Headers, URLSearchParams } from '@angular/http';
import 'rxjs/add/operator/toPromise';
import * as moment from 'moment';

export class NoticiaFiltro {
  titulo: string;
  font: string;
  pagina = 0;
 itensPorPagina = 8;

}


@Injectable()
export class NoticiaService {


 noticiasUrl = 'https://mdw-arm-wladimir.herokuapp.com/noticias';


  constructor(private http: Http) { }

  pesquisar(filtro: NoticiaFiltro): Promise<any> {

    const params = new URLSearchParams();

    const headers = new Headers();

    params.set('page', filtro.pagina.toString());
    params.set('size', filtro.itensPorPagina.toString());

    if (filtro.titulo) {
      params.set('titulo', filtro.titulo);
    }

    if (filtro.font) {
      params.set('font', filtro.font);
    }

    return this.http.get(`${this.noticiasUrl}`, { headers, search: params  })
      .toPromise()
      .then(response => {
        const responseJson = response.json();
        const noticias = responseJson.content;

        const resultado = {
          noticias,
          total: responseJson.totalElements
        };

        return resultado;
    });
  }


     adicionar(noticia: Noticia): Promise<Noticia> {
            const headers = new Headers();
            headers.append('Content-Type', 'application/json');

            return this.http.post(this.noticiasUrl,
                JSON.stringify(noticia), { headers })
              .toPromise()
              .then(response => response.json());
        }

        excluir(codigo: number): Promise<void> {
          const headers = new Headers();

          return this.http.delete(`${this.noticiasUrl}/${codigo}`, { headers })
            .toPromise()
            .then(() => null);
      }


      atualizar(noticia: Noticia): Promise<Noticia> {
        const headers = new Headers();
        headers.append('Content-Type', 'application/json');

        return this.http.put(`${this.noticiasUrl}/${noticia.codigo}`,
            JSON.stringify(noticia), { headers })
          .toPromise()
          .then(response => {
            const lancamentoAlterado = response.json() as Noticia;

            this.converterStringsParaDatas([lancamentoAlterado]);

            return lancamentoAlterado;
          });
      }



      buscarPorCodigo(codigo: number): Promise<Noticia> {
        const headers = new Headers();

        return this.http.get(`${this.noticiasUrl}/${codigo}`, { headers })
          .toPromise()
          .then(response => {
            const noticia = response.json() as Noticia;

            this.converterStringsParaDatas([noticia]);

            return noticia;
          });
    }


        private converterStringsParaDatas(noticias: Noticia[]) {
          for (const noticia of noticias) {
            noticia.dataNoticia = moment(noticia.dataNoticia,
              'YYYY-MM-DD').toDate();
              }
            }



}

Someone would know how to help me solve this problem?

Answer 1

According to the bug, the domain making the request is not allowed to do so.

localhost:4200

The browser validates this information via the header Access-Control-Allow-Origin sent in response to the request. You can use the Chrome console (Network tab) to check the headers sent by the Heroku server.

Using Postman, you can see that the authorized domain is http://localhost:8000:

As the origin of the request localhost:4200 is different from the permitted origin localhost:8000 by the Heroku server, the browser blocks the GET Request.

By default, the angular starts a server on port 4200. To solve the problem, change the port the moment you start it:

ng serve --port 8000