post erro CORS | Angular 2: webapps ainda mais poderosas parte 2

Solucionado (ver solução)

Solucionado
(ver solução)

3
respostas

por Matheus Calaça

| 387.1k xp | 42 posts

Desenvolvedor full stack

Estou tentando fazer o post pelo angular em um WS, porem esta dando o erro:

Http failure response for (unknown url): 0 Unknown Error

Este mesmo erro estava ocorrendo quando tentava fazer o get , em minhas pesquisa encontrei uma extensão (CORS) para o navegador que resolveu.

Porem agora no método post esta dando o erro, mesmo com a extensão.

Pesquisei mais um pouco e pelo que entendi tenho que da a permissão no cabeçario do método post, porem não estou conseguindo fazer.

Gostaria de saber se realmente e esta a solução para o erro ou pode ser outra coisa, ou se pode ser alguma configuração que tenho que fazer no WS (estou usando o wildfly + java 8 para fazer o WS)

atualmente o código esta assim. servise.ts

postJsonApi(sufixo: string, json: JSON) {
    const httpOptions = {
      headers: new HttpHeaders({
        'Content-Type':  'application/json',
        'Access-Control-Allow-Origin': '*',
        'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
        'Access-Control-Allow-Headers': 'X-Requested-With,content-type'
      })
    };

    console.log(`post ${json}`);
    this._http.post(`${this._apiURL}/${sufixo}`, json, httpOptions)
    .subscribe(data => {console.log(data); });

  }

Estou tentando usar o angular 6, por conta disso em vez do httpModule do curso estou tentando usar o HttpClient

erro completo

HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: null, ok: false, …}
error:  ProgressEvent {isTrusted: true, lengthComputable: false, loaded: 0, total: 0, type: "error", …}
headers: HttpHeaders {normalizedNames: Map(0), lazyUpdate: null, headers: Map(0)}
message: "Http failure response for (unknown url): 0 Unknown Error"
name: "HttpErrorResponse"
ok :false
status:0
statusText:"Unknown Error"
url:null
__proto__:HttpResponseBase

3 respostas

por ANDRE FELIPE MOREIRA LEITE

| 64.6k xp | 1 posts

19/06/2018

Ola, em 'Access-Control-Allow-Headers' tente inserir

'Access-Control-Allow-Headers': 'Origin, Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers'

por Matheus Calaça

| 387.1k xp | 42 posts

Desenvolvedor full stack

19/06/2018

Já tentei este foi um dos primeiro pois e o mesmo que esta no swagger, o erro permanece.

este mesmo erro ocorre quando tento fazer o POST, PUT e o DELETE, e se eu desligar a extensão de CORS do navegado ele ocorre também no método GET

solução!

por Matheus Calaça

| 387.1k xp | 42 posts

Desenvolvedor full stack

21/06/2018

Achei a solução para o problema, em minhas pesquisas achei um local falando que tinha que configurar o proxy eu fiz essa configuração e deu certo.

segue a solução

O service com a conexão bem dizer ficou igual service.ts

private _apiURL = '/api';
  private _httpOptions = {
    headers: new HttpHeaders({
      'Content-Type': 'application/json',
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET, POST, OPTIONS, PUT, PATCH, DELETE',
      'Access-Control-Allow-Headers':
        'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers'
    })
  };

 postJsonApi(sufixo: string, json: JSON): Observable<any> {
    return this._http.post(`${this._apiURL}/${sufixo}`, json, this._httpOptions);
  }

O que mudou foi no packge.json onde eu tive que adicionar o comando "--proxy-config proxyconfig.json" no script de start ficando assim

packge.json

{
  "name": "estudos",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --proxy-config proxyconfig.json",
    "build": "ng build --prod",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
.... mais codigos...

E eu criei o arquivo proxyconfig.json

proxyconfig.json

{
  "/api/*": {
     "target": "http://localhost:3254/",
     "secure": false,
     "logLevel": "debug",
     "changeOrigin": true
  }
}