时间戳

首页 > 解决方案 > Angular：在获取中有条件地设置“凭据”选项

angular - Angular：在获取中有条件地设置“凭据”选项

问题描述

对于 Angular 应用程序，我需要对 Laravel 后端进行一些 API 调用，该后端必须在 PHP 会话中临时存储一些数据。Angular 应用程序运行在 上http://localhost:4200，而 Laravel 后端运行在本.test地域上。为了让 Laravel 会话 cookie 跨域工作，我必须将credentials选项设置为include本地。尽管它们都将在同一个域上运行，但在生产中不需要这样做。

为了解决这个问题，我想在我的环境文件中使用一个设置（我在本地有一个，一个用于生产）。但是，当我在调用中简单地添加credentials: environment.credentials( credentialsinenvironment设置为include本地，same-origin用于生产) 时fetch，我得到了错误Types of property 'credentials' are incompatible. Type 'string' is not assignable to type 'RequestCredentials'，这是有道理的。要解决此问题，我可以将其更改为credentials: environment.credentials === 'include' ? 'include' : 'same-origin'（可行），但这似乎是不必要的额外检查，是否有更好/更简单的方法来动态设置此值，或者是否可以将 astring转换为RequestCredentials？

作为参考，我的 fetch 调用看起来像这样的 atm：

const url = environment.apiUrl + '/slug/';
const response = await fetch(url, {
  method: 'POST',
  credentials: environment.credentials === 'include' ? 'include' : 'same-origin',
  headers: {
    'Content-Type': 'application/json'
  },
  body: ...
});

标签： angularfetch

解决方案

environment.credentials是一个字符串，而凭证是一个RequestCredentials. 但是，您可以将字符串转换为RequestCredentials：

const url = environment.apiUrl + '/slug/';
const response = await fetch(url, {
  method: 'POST',
  credentials: environment.credentials as RequestCredentials,
  headers: {
    'Content-Type': 'application/json'
  },
  body: ...
});

推荐阅读