Question

我是Angular的新手，正在使用Angular 7.1.3 我已通过Angular HTTP成功登录到我的Laravel 5.7 Passport API系统，并获得访问令牌并存储在cookie中。

现在我想简单地使用访问令牌获取数据，但是我无法获取它给出302重定向错误的数据：

我的auth.service.ts代码为：

import { Injectable } from '@angular/core';
import {HttpClient, HttpHeaders} from "@angular/common/http";
import { GlobalvarsService } from "./globalvars.service";
import { Cookie } from 'ng2-cookies/ng2-cookies';
import {Router} from '@angular/router';

@Injectable({
  providedIn: 'root'
})
export class AuthService {

  constructor(private http : HttpClient, private globvar : GlobalvarsService, private router : Router) { }

details(){

      const httpOptions = {
          headers: new HttpHeaders({
              'Content':'application/json',
              'Content-Type':  'application/x-www-form-urlencoded',
              'Authorization' : 'Bearer '+  Cookie.get('access_token')
          }),
      };

      let input = new FormData();
      this.http.get(mypath + 'api/details',httpOptions).subscribe(
          data => {
              console.log('dddddddd');
                console.log(data);

          },
          error => {
          }
      )
  }

注意：mypath是我的网址

我的代码有什么问题？发送请求时没有设置POST的{{1}}方法。

Answer 1

这称为预检请求，由于跨源资源共享（简称CORS）策略，由浏览器强制执行。您无法直接控制它。

如果可以执行所需的请求，则向服务器发出“请求”以“询问”。当您尝试提出的请求被认为“不简单”时，就完成了。关于这意味着您可以看到https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#Simple_requests

因此，在某些情况下，这是预期的行为。如果您向应用程序所在的同一域发出请求，则不会进行预检。如果您对外部资源提出非简单的请求，则使用CORS，并且将询问“问题”。从应用程序的角度来看，如果您不希望进行预检，则只能将请求更改为简单。

最重要的是，该代码中有什么臭味：

您在Content-Type请求中设置了GET。为什么？ GET没有内容，所以没有类型
Content标头可能被认为是CUSTOM，这会导致预检发生。我只假设您想要Accept标头来表示您希望响应为json
如果您的cookie中包含身份验证令牌，为什么还要发送带有标头的身份验证令牌？您最终将获得两次具有相同数据的请求-在cookie和标头中。
通常将授权数据附加到请求是通过http拦截器完成的，因此它可以处理每个请求，而无需手动将请求添加到每个请求中（就像您尝试做的那样）https://angular.io/guide/http#intercepting-requests-and-responses

Angular 7.1.3：发布不适用于Authorization Bearer令牌

1 个答案: