java - Angular 6 访问 REST 失败，Access-Control-Allow-Origin

Question

所以我尝试使用 '@angular/common/http' 中的 http: HttpClient 将数据从 REST 源加载到我的 Angular 6 应用程序中。使用 ng serve --open 在浏览器中调用应用程序虽然没有完成这项工作。我认为 CORS 是这里的问题。我想我要么必须使用 Access-Control-Allow-Origin 或其他东西设置服务器或客户端 header ，但我已经尝试了多种方法但没有成功使这个简单的 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;
}

我还将 '@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？

Answer 1

问题与 Angular 本身无关，而是与您使用的网络服务器有关。

在命中实际请求之前， Angular http 客户端请求始终具有类型为 options 的预检请求。

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

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