Angular 6 访问 REST 失败，并带有 Access-Control-Allow-Origin

Question

所以我正在尝试使用来自 REST 的http: HttpClient将数据从 REST 源加载到我的 Angular 6 应用程序中'@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浏览器中调用相同的网址(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;
}

我还'@angular/common/http'HttpClientModule添加到imports数组和app.module.ts中的providers数组中。

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？

Answer 1

该问题与角度本身无关，而是与您正在使用的Web服务器有关。

角度 http 客户端请求在命中实际请求之前始终具有带有类型选项的预检请求。

您可能需要将 OPTIONS 请求方法添加到此行

.header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT")

Answer 2

我几乎花了一天时间来解决问题。首先，我认为问题来自角度方面，但似乎问题来自服务器方面。您需要在 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();
}

Answer 3

我浪费了将近一天的时间在客户端角度应用程序上弄清楚，但问题实际上出在服务器端 nodejs 应用程序以允许 CORS。

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

Answer 4

我使用代理解决了CORS问题。

1. 在与package.json相同的级别创建一个文件proxy.conf.json。
2. 添加以下内容

{
"/api/*": {
"target": "http://external-domain-you-wanted-to-access",
"secure": false,
"changeOrigin": true
}
}

3. 运行命令ng serve --proxy-config proxy.conf.json

参考链接

Answer 5

以下步骤帮助我解决了它：

1-在项目根目录下创建proxy.conf.json文件，而不是SRC文件夹

3-proxy.conf.json文件中添加如下代码。

{
"/api": {
"target": "http://localhost:3000",
"secure": false
}
}

4-在脚本"start": ng serve --proxy-config proxy.conf.json下package.json中准确添加此内容

5-做npm start而不是ng serve