使用 Angular 中的标头重定向到外部 url答案

【问题标题】：Redirect to external url with Headers in Angular使用 Angular 中的标头重定向到外部 url
【发布时间】：2021-06-28 05:50:17
【问题描述】：

我有一个 Angular（版本 8）应用程序，它将使用 HEADERS 重定向/调用外部 url（不是 API）。

我可以调用/重定向外部 url，但不能发送任何 HEADERS。

问题是，一旦我能够成功登录，我必须在重定向时将标头中的身份验证令牌发送到外部 url。

请告诉我如何在重定向到外部 url 时发送身份验证令牌。

我浏览了下面的 url，它可以帮助我重定向到外部 url，但没有发送标题。

Angular 6 Redirect to external url using POST

【问题讨论】：

标签： javascript angular

【解决方案1】：

您创建headers。

例如：JSW，如果您在 localStorage 中有您的令牌，则为“current_user”令牌：

import { HttpHeaders } from '@angular/common/http';
....
const headers = new HttpHeaders()
  .append("Authorization", "Bearer " + localStorage.getItem("current_user")["token"])
  .append("Content-type", "application/json");

你定义你的httpOptions。

常量 httpOptions = { 标头：新的 HttpHeaders({ '内容类型'：'应用程序/json'，授权：'您的身份验证令牌' }) };

或者更整洁（如果你之前已经声明了 const headers

const httpOptions = {
  headers
};

您将重定向/调用到外部 url。

    const externalUrl = 'http://....';
    const dataToPut = 'Usually, it will be an object, not a string';
    
    this.http.post<Hero>(this.externalUrl, dataToPut , httpOptions)
        .pipe(
          catchError(this.handleError('post error: ', dataToPut ))
        );

无论如何，一旦你知道怎么做，在标头中发送身份验证令牌的最佳方法是通过INTERCEPTOR，这将拦截你所有的 http 调用并插入标头身份验证参数： https://angular.io/guide/http#intercepting-requests-and-responses

P.S：我强烈建议您阅读这 2 个官方文档页面以进行进一步检查...全部都在那里，更详细的信息

https://angular.io/guide/http

https://angular.io/guide/http#adding-headers

[Angular] [http] [headers] [interceptor]

【讨论】：

使用拦截器，你将如何过滤掉一些不需要设置身份验证头的调用？

【解决方案2】：

我认为您这样做的方式是通过 XHR 请求发送标头。然后，如果您想稍后重新加载，则可以。但是报头传输会首先发生

this.http
.post('api/login', body, {
  headers: new HttpHeaders({
    'Authorization': 'my-auth-token',
    'x-header': 'x-value'
  })
}).subscribe(() => window.location.href='https://some-other-website.com')

【讨论】：

我试过这个，但 post call 失败了。状态码：404 Not Found.. 也尝试使用 GET 但同样的错误.. 我正在访问的 url 不是 API url，它只是普通的 url（api 网关），它使用我的身份验证令牌重定向到另一个网页登录后获取。
我试过了，它正在工作，但没有发送标题... const myform = document.createElement('form'); myform.method = 'GET'; myform.action = 网址； myform.style.display = '无'; myform.append('tokeninfo', localStorage.getItem('token')); document.body.appendChild(myform); myform.submit();
这些代码对我来说毫无意义，抱歉。在表单提交时，将上面的 http 请求发送到您的 api 的 URL，其中标头（无论它们需要是什么）按照您的 API 要求的方式格式化。您在评论中输入的所有表格内容与问题无关
对不起。我的意思是说，我尝试了你首先给出的建议，但得到 404 错误。这就是为什么我尝试了stackoverflow.com/questions/53472103/…中提到的另一种方式我在cmets中发布的代码sn-ps..抱歉误导你......
404 错误意味着您发送到了错误的 URL。网址需要更改