web-dev-qa-db-ja.com

Angular 4 http CORS Javaサーブレット付きの 'Access-Control-Allow-Origin'なし

Http.postを実行しようとしていますが、chromeは次のエラーを表示しています：

Access-Control-Allow-Originはありません。

My Angular関数は：

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");
javaangularservlets
7
Nau Parejaa Escamilla

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

基本的に、たとえば nginx Webサーバーが実行されているリモートマシンにリクエストを送信する場合は、まったく同じアプリケーションに対してすべての呼び出しを実行します。 localhost:4200（angular/cliのデフォルト）。次に、--proxy-configを使用してこれらの応答をサーバーにリダイレクトします。

サーバーのapiにすべての/apiプレフィックスエントリポイントがあるとします。プロジェクトのルートにproxy.config.jsonというファイルを作成し、次のように設定する必要があります。

{
    "/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/をポイントします。

最後に、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()));
  }

}

Angular 5 Update：

app.module.tsでは、import { HttpModule } from '@angular/http';をimport { HttpClientModule } from '@angular/common/http';に置き換える必要があります。

サービスは少し変更されます：

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()
      });
    }
}
14
AndreaM16

この目的のためにAngular CLIプロキシツールを使用できます。

  • 1.プロジェクトのルートにproxy.config.jsonファイルを作成します
  • 2.この構文を使用してAPI URLをターゲットURLにマップします
 "/api/xxxxxxx" : {
        "target" : "http://www.api.com/xxxxxxx", 
        "secure" : false,
        "logLevel" : "debug",
        "changeOrigin": true
    }
  • 3.を使用してアプリケーションを提供する
ng serve --proxy-config proxy.config.json
1
Kodjo Tchioffo