【发布时间】：2018-11-09 21:52:57
【问题描述】：
所以我尝试使用来自'@angular/common/http' 的http: HttpClient 将来自REST 源的数据加载到我的Angular 6 应用程序中。使用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 6 中，我使用以下由ng generate service tour 生成的服务类。在其中我创建了 getTour(id: string) 方法，它只是在 URL 上调用 REST 并将检索到的 JSON 字符串作为 Tour 对象返回：
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;
}
我还将HttpClientModule从'@angular/common/http'添加到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？
【问题讨论】：
-
@PaulSamsotha 不是重复的。发现了。这里的问题是
ng serve，它必须配置为--proxy-config proxy.config.json。配置文件需要有"changeOrigin": true的设置。 -
经过数小时后发现，它现在可以完美运行。尽管如此，我仍然无法理解 CORS 的感觉，因为它是一个隐藏的陷阱，需要花费大量时间来找出它是什么，同时又不能提供更多的安全性，这是非常痛苦的。所以如果有人愿意给出答案，我很乐意接受。
-
@PaulSamsotha 该链接从后端的角度解决了这个问题。花了几个小时才明白，但现在就像一个魅力。
-
@PaulSamsotha 还是有问题。每次我通过 Angular 应用程序访问 REST api 时，我都会失去会话。在每次访问时，他的会话都会更新。在客户端和服务器端尝试了
withCredentials: true，但没有奏效。这仅在 URL 不同时发生。如果 URL 相同，则会话完美运行。又是 CORS 吗？
标签： java angular rest web-services cors