时间戳

首页 > 解决方案 > 配置Angular项目在开发模式下发送http cookie

angular - 配置Angular项目在开发模式下发送http cookie

问题描述

我编写了一个 PHP 后端来检查请求是否来自授权用户。这就像使用以下代码一样简单

if(!isset($_SESSION["id"])){
    http_response_code(403);
    die("Error. Unauthorized user.");  
}

这在生产中完全没问题，但在开发中我遇到了问题，因为在本地开发服务器上运行的 Angular 应用程序不发送 cookie（服务器也不存储它）。

如何配置 Angular 服务器/应用程序以在开发期间发送会话 cookie？我正在使用以下代码启动应用程序

ng serve --port 4000 --host example.com --ssl true --sslKey path --sslCert path2

更新

我不想改变我的应用程序逻辑或任何东西。这是使开发易于管理的唯一方法。我需要在ng serve节点服务器上发送 cookie 或配置节点服务器在运行时发送 cookie。此外，如果在生产中使用一个版本，而在开发中使用另一个版本（正如强烈暗示的答案所暗示的那样），我需要在每次推送更新时更改它，然后再将其更改回来，给我留下 2 个版本。可怕的，可怕的做法

更新 2：

有关其他答案，请参阅此问答：在 Angular 应用程序中发送 cookie 和 Access-Control-Allow-Origin in development mode

标签： angular

解决方案

在每个请求上传递 cookie 非常简单。ng serve不提供打开此功能的方法，但您可以根据您的环境设置有条件地传递 cookie：

这是一个示例拦截器：

import { Injectable } from '@angular/core';
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { environment } from '@app/environments/environment.ts'

@Injectable()
export class CustomHttpInterceptor implements HttpInterceptor {

  intercept (httpRequest: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const clonedRequest = httpRequest.clone({
      withCredentials: environment.sendCookies,
    });

    return next.handle(clonedRequest);
  }

}

在您的 environment.ts 中，您可以设置sendCookies为true，在 environment.prod.ts 中，将其设置为false. 这样，您仍然只有一个版本的应用程序，但在您需要的地方会有不同的行为。

推荐阅读