したがって、RESTソースからAngular 6アプリに_http: HttpClient
_から_'@angular/common/http'
_を使用してデータをロードしようとしています。 _ng serve --open
_を使用してブラウザーでアプリを呼び出すことはできませんが、ここではCORSが問題だと思います。サーバーヘッダーまたはクライアントヘッダーを_Access-Control-Allow-Origin
_または何かで設定する必要があると思いますが、この単純なREST呼び出しを機能させることに成功せずに、すでに複数の方法を試しました。したがって、以下は私がコーディングしたものです。
ブラウザでAngularアプリを呼び出すと、次のエラーが返されます。
_Failed to load http://localhost:8080/mysite-backend/rest/report/single/d83badf3:
Response to preflight request doesn't pass access control check:
No 'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:4200' is therefore not allowed
access.
_
Chromeブラウザ内で同じURL(_http://localhost:8080/mysite-backend/rest/report/single/d83badf3
_)を呼び出すと、完全に機能します。
_{"id":"d83badf3","language":"en","categoryId":"a5","title":"Simcity","created":1527723183880,"modified":1527723183880}
_
Angular内で、_ng generate service tour
_で生成した次のサービスクラスを使用します。その中で、URLでRESTを呼び出すだけで、取得したJSON文字列をTourオブジェクトとして返すメソッドgetTour(id: string)
を作成しました。
_import { Injectable } from '@angular/core';
import { HttpHeaders, HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { Tour } from './tour';
import { catchError, tap } from 'rxjs/operators';
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json'
})
};
@Injectable({
providedIn: 'root'
})
export class TourService {
// URL to the web api.
private tourUrl = 'http://localhost:8080/mysite-backend/rest/report';
constructor(
private http: HttpClient
) { }
/**
*
* @param id: string GET tour report by id. Will 404 if id not found.
*/
getTour(id: string): Observable<Tour> {
httpOptions.headers.append('Access-Control-Allow-Origin', 'http://localhost:8080');
httpOptions.headers.append('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
httpOptions.headers.append('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
httpOptions.headers.append('Access-Control-Allow-Credentials', 'true');
const url = `${this.tourUrl}/single/${id}`;
console.log("XXX URL GET " + url)
return this.http.get<Tour>(url, httpOptions).pipe(
tap(_ => this.log(`fetched tour id=${id}`)),
catchError(this.handleError<Tour>(`getHero id=${id}`))
);
}
private handleError<T> (operation = 'operation', result?: T) {
return (error, any): Observable<T> => {
console.error(error);
this.log(`${operation} failed: ${error.message}`);
return of(result as T);
};
}
private log(message: string) {
console.log("Log message: " + message);
}
}
_
これはTour
オブジェクトです:
_export class Tour {
id: string;
language: string;
categoryId: string;
created: Date;
modified: Date;
title: string;
content: string;
}
_
_'@angular/common/http'
_内のHttpClientModule
配列とimports
配列にproviders
を_app.module.ts
_から追加しました。
RESTful WebServiceはJavaで構築されています。ここにgetReport(@PathParam("reportId") String reportId)
メソッドがあります。これはReport
オブジェクトを取得し、それをReponse
内で返します。
_import Java.util.List;
import javax.inject.Inject;
import javax.servlet.http.HttpServletRequest;
import javax.ws.rs.Consumes;
import javax.ws.rs.DELETE;
import javax.ws.rs.GET;
import javax.ws.rs.POST;
import javax.ws.rs.PUT;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
import javax.ws.rs.core.Context;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Response;
/**
* Describes the RESTful access for reports.
*/
@Path("/report")
@Produces(MediaType.APPLICATION_JSON)
@Consumes(MediaType.APPLICATION_JSON)
public class ReportResource {
@Inject
private Logger logger;
@GET
@Path("/single/{reportId}")
public Response getReport(@PathParam("reportId") String reportId) {
//return Mock.getReport(reportId);
return Response.ok() // 200
.entity(Mock.getReport(reportId))
.header("Access-Control-Allow-Origin", "*")
.header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")
.allow("OPTIONS").build();
}
...
}
_
Angular 6クライアントからJava RESTful WebServiceへの呼び出しを成功させるにはどうすればよいですか?
問題はangular自体には関係ありませんが、使用しているWebサーバーには関係ありません。
angular httpクライアント要求には、実際の要求に到達する前に、常にタイプoptionsのプリフライト要求があります。
この行にOPTIONSリクエストメソッドを追加する必要があるかもしれません
.header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")
プロキシを使用してCORSの問題を解決しました。
{
"/api/*": {
"target": "http://external-domain-you-wanted-to-access",
"secure": false,
"changeOrigin": true
}
}
私は問題の解決にほぼ1日を費やしました。まず、問題はangular=側からのものであると考えましたが、サーバー側からの問題のようです。getメソッドの上に@CrossOriginアノテーションを追加する必要があります。
@GET
@CrossOrigin(origins = "http://localhost:4200")
@Path("/single/{reportId}")
public Response getReport(@PathParam("reportId") String reportId) {
//return Mock.getReport(reportId);
return Response.ok() // 200
.entity(Mock.getReport(reportId))
.header("Access-Control-Allow-Origin", "*")
.header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")
.allow("OPTIONS").build();
}
クライアント側での計算でほぼ1日無駄になりましたangularアプリケーションですが、問題は実際にはCORSを許可するサーバー側のnodejsアプリケーションでした。
app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); next(); });