Angular 6 访问 REST 因 Access-Control-Allow-Origin 而失败

Posted 2023-03-04

【中文标题】Angular 6 访问 REST 因 Access-Control-Allow-Origin 而失败

【英文标题】：Angular 6 accessing REST failing with Access-Control-Allow-Origin

【发布时间】：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 的感觉，因为它是一个隐藏的陷阱，需要花费大量时间来找出它是什么，同时又不能提供更多的安全性，这是非常痛苦的。所以如果有人愿意给出答案，我很乐意接受。

***.com/a/50241292/2587435

@PaulSamsotha 该链接从后端的角度解决了这个问题。花了几个小时才明白，但现在就像一个魅力。

@PaulSamsotha 还是有问题。每次我通过 Angular 应用程序访问 REST api 时，我都会失去会话。在每次访问时，他的会话都会更新。在客户端和服务器端尝试了withCredentials: true，但没有奏效。这仅在 URL 不同时发生。如果 URL 相同，则会话完美运行。又是 CORS 吗？

【参考方案1】：

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

在点击实际请求之前，有角度的 http 客户端请求总是有一个类型为 options 的预检请求。

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

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

【讨论】：

你认为我应该在哪里添加OPTIONS？我之所以问，是因为我已经在 Angular 客户端调用中添加了 OPTIONS：httpOptions.headers.append('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

允许应该来自服务器。尝试用 .header("Access-Control-Allow-Methods", "GET,发布、删除、放置、选项")

***.com/questions/50614896/…

【参考方案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();

【参考方案3】：

我在客户端 Angular 应用程序上浪费了将近一天的时间，但问题实际上出在服务器端 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(); );

【参考方案4】：

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

创建与 package.json 同级的文件 proxy.conf.json。 添加以下内容

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

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

Reference link

【讨论】：

proxy.conf.json 不适用于生产

【参考方案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

【讨论】：

proxy.conf.json 不适用于生产