角度4つのHTTP CORS Javaサーブレット

Question

といいえ「アクセス制御 - 許可 - 起源」私はhttp.postをやろうとしているが、Chromeは次のエラーを示している。

No Access-Control-Allow-Origin.

私の角度の関数であります：

onSubmit(event: Event) { 
    event.preventDefault(); 
    this.leerDatos() 
    .subscribe(res => { 
     //datos = res.json(); 
     console.log("Data send"); 
    }, error => { 
      console.log(error.json()); 
     }); 



    } 

    leerDatos(): Observable<any> { 
    let headers = new Headers({ 'Content-Type': 'application/json' }); 
    let options = new RequestOptions({ headers: headers }); 

    return this.http.post(`http://localhost:8080/LegoRepositoryVincle/CoreServlet`, { name: "bob" }, options) 
        //.map(this.extractData) 
        //.catch(this.handleError); 
    } 

そして、私のサーブレットのdoPostメソッドが含まれています：

response.setContentType("application/json"); 
response.setCharacterEncoding("utf-8"); 
response.addHeader("Access-Control-Allow-Origin","http://localhost:4200"); 
response.addHeader("Access-Control-Allow-Credentials", "true"); 
response.addHeader("Access-Control-Allow-Methods","GET,POST"); 
response.addHeader("Access-Control-Allow-Headers","X-PINGOTHER, Origin, X-Requested-With, Content-Type, Accept, Cache-Control, Pragma"); 

Answer 1

あなたはまだCORSを使用したい場合は、あなたが目を解決することができます開発中angular/cli --proxy-configを使用して問題の種類です。

本来、リモートマシンに、たとえばnginxウェブサーバーを実行していることを要求したい場合は、非常に同じアプリケーションへのすべての呼び出しを実行します。 localhost:4200（angle/cliではデフォルト）。その後、--proxy-configを使用して、これらの応答をサーバーにリダイレクトします。

あなたのサーバーのAPIのプレフィックスがすべて/apiであるとしましょう。

{ 
    "/api" : { 
     "target" : "http://xx.xxx.xxx.xx", // Your remote address 
     "secure" : false, 
     "logLevel" : "debug", // Making Debug Logs in console 
     "changeOrigin": true 
    } 
} 

そして、すべてのHTTP要求はlocalhost:4200/api/を指します。あなたは、プロジェクトのルートにproxy.config.jsonと呼ばれ、それが好きな設定ファイルを作成する必要があります

最後に、ng server --proxy-config proxy.config.jsonを実行してください。

あなたには、いくつかのヘッダがこの例のように、これらの追加するには、Webサーバーからそれらを追加したり、http.service.tsを編集し、要求に欠けていることに気付いた場合：だから

import { Injectable } from '@angular/core'; 
import { Http, Headers, RequestOptions } from '@angular/http'; 
import { Observable } from 'rxjs/Rx'; 
import { isNull } from 'lodash'; 

@Injectable() 
export class HttpClientService { 

    private _host: string; 
    private _authToken: string; 
    private _options: RequestOptions = null; 

    constructor(private _http: Http, private _config: AppConfig, private _localStorageService: LocalStorageService) { 
     this._host = ''; // Your Host here, get it from a configuration file 
     this._authToken = ''; // Your token here, get it from API 
    } 

    /** 
    * @returns {RequestOptions} 
    */ 
    createAuthorizationHeader(): RequestOptions { 
     // Just checking is this._options is null using lodash 
     if (isNull(this._options)) { 
     const headers = new Headers(); 
     headers.append('Content-Type', 'application/json; charset=utf-8'); 
     headers.append('Authorization', this._authToken); 
     this._options = new RequestOptions({headers: headers}); 
     } 
     return this._options; 
    } 

    /** 
    * @param url {string} 
    * @param data {Object} 
    * @return {Observable<any>} 
    */ 
    get(url?: string, data?: Object): Observable<any> { 
     const options = this.createAuthorizationHeader(); 
     return this._http.get(this._host + url, options); 
    } 

    /** 
    * @param url {string} 
    * @param data {Object} 
    * @return {Observable<any>} 
    */ 
    post(url?: string, data?: Object): Observable<any> { 
     const body = JSON.stringify(data); 
     const options = this.createAuthorizationHeader(); 
     return this._http.post(this._host + url, body, options); 
    } 

} 

を、あなたのAPIのすべてを実行することになり

：

import { Component, OnInit } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { HttpClientService } from './http.service.ts'; 

export class TestComponent implements OnInit { 

    _observable: Observable<any> = null; 

    constructor(private _http: HttpClientService) { } 

    ngOnInit() { 
     this._observable = this _http.get('test/') 
       .map((response: Response) => console.log(response.json())); 
    } 

} 

角度5アップデートのように、このサービスを通じて呼び出しますapp.module.tsではimport { HttpModule } from '@angular/http';をimport { HttpClientModule } from '@angular/common/http';に置き換える必要があります。ではなく、このような状況で発生します飛行前のOPTIONS要求 - サーブレットだけPOSTリクエストに答えるために可能性があります

import { Injectable } from '@angular/core'; 
import { HttpClient, HttpHeaders } from '@angular/common/http'; 
import { isNull, isUndefined } from 'lodash'; 

@Injectable() 
export class HttpClientService { 

    private _host: string; 
    private _authToken: string; 
    private __headers: HttpHeaders; 

    constructor(private _http: HttpClient, private _config: AppConfig, private _localStorageService: LocalStorageService) { 
     this._host = ''; // Your Host here, get it from a configuration file 
     this._authToken = ''; // Your token here, get it from API 
    } 

    /** 
    * @returns {HttpHeaders} 
    */ 
    createAuthorizationHeader(): HttpHeaders { 
     // Just checking is this._options is null using lodash 
     if (isNull(this.__headers)) { 
     const headers = new HttpHeaders() 
      .set('Content-Type', 'application/json; charset=utf-8') 
      .set('Authorization', this. _authToken || ''); 
     this.__headers= new RequestOptions({headers: headers}); 
     } 

     return this.__headers; 
    } 

    /** 
    * @param url {string} 
    * @param data {Object} 
    * @return {Observable<any>} 
    */ 
    get(url?: string, data?: Object): Observable<any> { 
     const options = this.createAuthorizationHeader(); 
     return this._http.get(this._host + url, { 
      headers : this.createAuthorizationHeader() 
     }); 
    } 

    /** 
    * @param url {string} 
    * @param data {Object} 
    * @return {Observable<any>} 
    */ 
    post(url?: string, data?: Object): Observable<any> { 
     const body = JSON.stringify(data); 
     const options = this.createAuthorizationHeader(); 
     return this._http.post(this._host + url, body, { 
      headers : this.createAuthorizationHeader() 
     }); 
    } 
}